vue基础2--双向数据绑定

双向数据绑定

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

单行文本：

<div id="app">
    <span>span---{{name}}</span><br>
    <input type="text" v-model="name">
    <input type="button" @click="change" value="修改">
</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
    el:'#app',
    data:{
         name:'llsls'
            },
     methods:{
          change(){
             this.name='';
                }
            }
   })

　多行文本

<!--    多行文本-->
    <span>textarea--{{content}}</span>
    <textarea v-model="content"></textarea>


data:{
                content:'hellohhahha'
            }　　

　单选框

<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]   //默认选择第一个，data里的movies不传value的话默认都不选

　下拉框　

 <span>请选择你喜欢的电影: {{selectMovie}}</span><br>
 <select v-model="selectMovie">
     <option disabled value="">请选择</option>    <!--默认添加一个不可选择的请选择 提示信息-->
     <option value="变形金刚">变形金刚</option>
     <option value="复仇者联盟">复仇者联盟</option>
     <option value="飞驰人生">飞驰人生</option>
</select>

selectMovie:""  //单选，所以传一个字符串即可；data里的selectMovie传value值时表示默认选择xx

　　多选下拉框

<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" :value="option.id">{{option.name}} 
             </option>
</select>


options:[{"name":"变形金刚","id":1}, {"name":"复仇者联盟","id":2}, {"name":"飞驰人生","id":3}]
//想要改变值，改变data数据源即可，增加数据保密性