VUE基础2-双向数据绑定

双向数据绑定

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

文本/多行文本

<!--    单行文本-->
    <span>input--{{movie}}</span>
    <input type="text" v-model="movie">
    <input type="button" v-on:click="changMovie" value="修改">
<!--    多行文本-->
    <span>textarea--{{content}}</span>
    <textarea v-model="content"></textarea>
 
    var vm=new Vue({
        el:'#app',
        data:{
            movie:"变形金刚",
            content:"变形金刚的介绍"
 
        },
        methods:{
            changMovie:function () {
                this.movie = '复仇者联盟';
                this.content = '复仇者联盟的介绍'
            }
        }
    })

单选框

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

多选框

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

下拉框

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

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

多选下拉框

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

动态值绑定

<span>请选择你喜欢的电影: {{selectMovie}}</span><br>
<select v-model="selectMovie" >
   <option disabled value="">请选择</option>
   <option v-for="option in options" v-bind:value="option.id">{{option.name}}</option>
</select>

selectMovie:"",
options:[{"name":"变形金刚","id":1}, {"name":"复仇者联盟","id":2}, {"name":"飞驰人生","id":3}]