vue学习-指令

v-Model表单绑定

用途：实现表单元素和数据之间的双向绑定

1.基本使用

<div id="app" v-model="message">
	{{message}}
</div>
<script src="js/vue.js"></script>
<script>
	const app=new Vue({
		el:'#app',
		data:{
			message:'你好'
	})
</script>

这样就可以实现数据和输入框实现绑定，当改变数据时，输入框中的内容也会改变，改变输入框中的内容时数据也会改变。
原理：v-model相当于v-bind和v-on指令的结合

<div id="app" :value="message" v-on:input="valueChange">
	{{message}}
</div>
<script src="js/vue.js"></script>
<script>
	const app=new Vue({
		el:'#app',
		data:{
			message:'你好'
		},
		methods:{
		valueChange(event){
		this.message=event.target.value;
		}
		}
	})
</script>

v-bind绑定一个value属性，将数据绑定到界面；v-on监听input上的事件，将输入框中的内容传给数据。
也可以将Methods中的方法直接写在input标签中，以表达式的形式简化代码：

<div id="app" :value="message" @:input="message=$event.target.value">

2.v-model结合radio类型使用

<div id="root">
	<label for="male">
		<input type="radio" id="male" name="sex" value="男" v-model="sex" />男
	</label>
	<label for="female">
		<input type="radio" id="female" name="sex" value="女" v-model="sex" />
	</label>
	<h2>你选择的性别是：{{sex}}</h2>
</div> 
 <script>
     new Vue({
          el:"#root",
          data:{
		    sex:"女",
             },
        })
</script>

name让两个元素互斥,v-model绑定的是同一个元素也可以是互斥的。
也可以写成：

<input type="text"  :value="message" @input="message=$event.target.value"/>  //和v-model效果相同
<h2>{{message}}</h2>
<input type="text" v-model="message1" />
<h2>{{message1}}</h2>
<script>
    new Vue({
        el:"#app",
        data:{
	      sex:"男",//默认值
		  message:"",
		  message1:""
         },
    })

3.v-model结合checkbox使用
单选项：

多选项：

1.checkbox和普通input一样，点击勾选就是输入value,而输入value会改变checked属性,所以会选中
当v-model对应“字符串”时会解析“字符串”为布尔值，v-model对应有值或是true，checkbox都会选中。
2.当v-model对应“数组”时有勾表示已选中，相当于赋值给，相当于有value，v-model对应value, 没有value属性时，点勾相当于将(‘null’)赋值给value——>v-model('null’为字符串),有value属性时，点勾相当于将(value)赋值给value——>v-model， 数据是双向绑定的，所以数组里的值对应着checkbox的value——>v-model。
3.处理表单，v-model一般都是对应字符串，所以处理checkbox的v-model，善用对应布尔值控制勾选。

4.v-model结合select类型使用

选择一个属性:

如果 v-model表达式的value初始值未能匹配任何选项，
元素将被渲染为“未选中”状态。
选择多个属性:

先绑定一个数组，再用 v-for渲染的动态选项。

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)，有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。