VUE基础2-双向数据绑定

双向数据绑定

当在绑定的标签下有多个标签，多个标签引用变量名，使用v-model修饰就可以实现改变变量值后，其他引用该变量的地方值也发生相应变化

文本/多行文本

 1 <!--    单行文本-->
 2     <span>input--{{movie}}</span>
 3     <input type="text" v-model="movie">
 4     <input type="button" v-on:click="changMovie" value="修改">
 5 <!--    多行文本-->
 6     <span>textarea--{{content}}</span>
 7     <textarea v-model="content"></textarea>
 8  
 9     var vm=new Vue({
10         el:'#app',
11         data:{
12             movie:"变形金刚",
13             content:"变形金刚的介绍"
14  
15         },
16         methods:{
17             changMovie:function () {
18                 this.movie = '复仇者联盟';
19                 this.content = '复仇者联盟的介绍'
20             }
21         }
22     })

单选框

1 <span>性别--{{genderValue}}</span><br>
2 <input type="radio" value="1" name="gender" v-model="genderValue"> 男
3 <input type="radio" value="2" name="gender" v-model="genderValue"> 女

多选框

1 <span>请选择你喜欢的电影--{{movies}}</span><br>
2 <input type="checkbox" value="1" v-model="movies"> 变形金刚
3 <input type="checkbox" value="2" v-model="movies"> 复仇者联盟
4 <input type="checkbox" value="3" v-model="movies"> 飞驰人生
5  
6 movies:[1,2,3] //多个数据值，需要定义一个空列表，或者有默认数据的列表

下拉框

如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。因此，推荐提供一个值为空的禁用选项。

1 <span>请选择你喜欢的电影: {{selectMovie}}</span><br>
2 <select v-model="selectMovie">
3     <option disabled value="">请选择</option>
4     <option value="变形金刚">变形金刚</option>
5     <option value="复仇者联盟">复仇者联盟</option>
6     <option value="飞驰人生">飞驰人生</option>
7 </select>
8 selectMovie:""

多选下拉框

1 <span>请选择你喜欢的电影: {{selectMovies}}</span><br>
2 <select v-model="selectMovies" multiple size="4">
3     <option disabled value="">请选择</option>
4     <option value="变形金刚">变形金刚</option>
5     <option value="复仇者联盟">复仇者联盟</option>
6     <option value="飞驰人生">飞驰人生</option>
7 </select>
8 selectMovies:[]

动态值绑定

1<span>请选择你喜欢的电影: {{selectMovie}}</span><br>
2 <select v-model="selectMovie" >
3    <option disabled value="">请选择</option>
4    <option v-for="option in options" v-bind:value="option.id">{{option.name}}</option>
5</select>
6 
7 selectMovie:"",
8 options:[{"name":"变形金刚","id":1}, {"name":"复仇者联盟","id":2}, {"name":"飞驰人生","id":3}]