表单指令
表单指令
概念:
请直接看精炼版代码
<div id="app">
<!-- v-model针对于表单元素 -->
<form action="" method="get">
<!-- 1、双向绑定：服务于文本输入框 -->
<!-- v-model存储的值为输入框的value值 -->
<div>
<input type="text" name="usr" v-model="in_val">
<input type="password" name="ps" v-model="in_val" >
<textarea name="info" v-model="in_val"></textarea>
</div>
<!-- 2、单选框 -->
<div>
<!-- 单选框是以name进行分组，同组中只能发生单选 -->
<!-- v-model存储的值为单选框的value值 -->
男：<input type="radio" name="sex" value="男" v-model="ra_val">
女：<input type="radio" name="sex" value="女" v-model="ra_val">
{{ ra_val }}
</div>
<!-- 3、单一复选框 -->
<!-- v-model存储的值为true|false -->
<!-- 或者为自定义替换的值 -->
<div>
<input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
{{ sin_val }}
</div>
<!-- 4、多复选框 -->
<!-- v-model存储的值为存储值多复选框value的数组 -->
<div>
<input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
<input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
<input type="checkbox" value="不挑" name="cless" v-model='more_val' />
{{ more_val }}
</div>
</form>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
in_val: '',
// 默认值可以决定单选框默认选项
ra_val: '男',
// 默认值为true，单一复选框为选中，反之false为不选中
sin_val: '',
// 数组中存在的值对应的复选框默认为选中状态
more_val: ['喜好女的','不挑']
}
})
</script>
详细代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- v-model 表单指令 v-model="变量" 变量给value属性提供值 -->
<!--1、数据的双向绑定-->
<input type="text" v-model="val">
<input type="text" v-model="val">
<p>{{ val }}</p>
<form action="">
<!--2、普通输入框: 直接绑定变量即可 -->
<input type="password" v-model="val">
<!--3、单选框-->
<!--radio_val的值是多个单选框中一个的value值，代表该单选框默认选中-->
<!--radio_val的值会随着选中不同的单选框而改变-->
<p>
<label for="male">男</label>
<input id="male" type="radio" value="male" v-model="radio_val" name="sex">
<label for="female">女</label>
<input id="female" type="radio" value="female" v-model="radio_val" name="sex">
<button @click="alertValue">单选框提交给后台的value</button>
<span>{{ radio_val + '被选中' }}</span>
</p>
<!--4、独立使用的复选框 -->
<!--sure_val的值为true|false，决定该单个复选框是否选中-->
<!-- 反之选中和不选中也会触发sure_val的改变 -->
<p>
<input type="checkbox" name="sure" value="同意" v-model="sure_val">
<span>{{ sure_val }}</span>
</p>
request.GET.get('sure', None)
<!--5、复选框-->
<!--hobby_val的值是数组，里面用来存放复选框所有选项的值，值存在代表该选框选中-->
<!--hobby_val的值是数组，反之选中和不选中也会触发这个数组增加或者删除值。-->
<p>
男<input type="checkbox" value="male" name="hobby" v-model="hobby_val">
女<input type="checkbox" value="female" name="hobby" v-model="hobby_val">
哇塞<input type="checkbox" value="?" name="hobby" v-model="hobby_val">
<span>{{ hobby_val }}</span>
</p>
<p>
<input type="submit">
</p>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
val: '',
radio_val: 'male',
sure_val: true,
hobby_val: ['?', 'male']
},
methods: {
alertValue () {
alert(this.radio_val)
}
}
})
</script>
</html>
