vue-双向绑定

一、双向绑定

问题：用:只能进行单向绑定(Model(data) -> View(html))
如果用:绑定表单元素的值，则用户修改表单元素的内容，无法自动修改data中的模型变量。意味着vue中永远拿不到用户在界面中修改的新值。

解决：今后凡是绑定(可输入，可选择的)表单元素，必须用双向绑定，才能在界面修改时，自动更新data中的数据。

双向绑定：既能(Model(data) -> View(html))，data中变化，页面自动跟随变化。
又能View(html) -> Model(data)，页面中变化，data中的变量自动跟随变化。
如何使用双向绑定：v-model~~:value~~ =“变量”
简写：因为几乎所有表单元素都用value属性控制元素的内容或值，所以，几乎所有v-model都绑定value属性，所以可简写为:v-model="变量"

例:
<div id="app">
    <input v-model:input="kwords">
    <button @click="search">百度一下</button>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            kwords: 'iphoneX'
        },
        methods: {
            search() {
                console.log(`查询${this.kwords}相关的内容...`)
            }
        }
    })
</script>

1、radio

绑定时：用data中sex的值和每个radio的提前写死的value值做比较，如果哪个radio的value值刚好等于data中sex的值就选中，其余不选中
修改时：用当前选中的radio的写死的value,反向赋值回data中的sex上

例：
<div id="app">
    <input type="radio" name="sex" v-model="sex" value="1">男
    <input type="radio" name="sex" v-model="sex" value="0">女
    <h1>{{sex==1?'男':'女'}}</h1>
</div>

data: {
    sex: 0
}

例：

<div id="app">
    <div class="tac">
        <img :src="`../img/${chosen}`" alt="">
    </div>
    <hr>
    <div class="tac">
        <label v-for="p of planes">
            <input type="radio" v-model="chosen" name="plane" :value="p">
            <img :src="`../img/${p}`">
        </label>
    </div>
</div>
data: {
    planes: ["p3.png", "p4.png", "p5.png"],
    chosen: 'p0.png'
}

2、select

特殊：每个option的value都是提前写死的，变得只是option的selected属性，变的只是选中的option是哪个。

例如：

<select v-model="city">
	<option value="bj.jpg"></option>
	<option value="hz.jpg"></option>
	<option value="sh.jpg"></option>
</select>

其实：v-model=“city” 其实仅仅起到一个绑定连接的作用，不具体绑定某一个属性值。
绑定时：用data中city变量的值和每个option中的写死的value做比较。如果data中city变量的值等于option中写死的value的值，则当前option就选中。其余option就不选中。
修改时：用当前选中项的写死的value，反向更新回data中的city中的变量
原理：v-model="city"其实，不具体绑定修改元素某个属性的值。而是为元素添加修改事件，比如onchange,oninput等。在事件处理函数中修改new Vue对象中的模型变量的值。进一步触发模型变量的set方法，触发通知，引起其他使用该变量的元素的状态的改变。

例：
<div id="app">
    <select v-model="city">
        <option value="bj.jpg">北京</option>
        <option value="hz.jpg">杭州</option>
        <option value="sh.jpg">上海</option>
    </select>
    <br/>
    <img :src="`../img/${city}`" alt="">
</div>

data: {
    city: 'hz.jpg'
}

3、checkbox

单选时，变化的只是checked属性。
何时：如果希望用checkbox控制一个bool类型的变量值时。
如何：

<input type="checkbox" v-model="isAgree">同意

data:{
	isAgree:false
}

绑定时：根据isAgree的值，决定checkbox的checked状态
修改时：用当前checkbox的checked状态，更新data中的isAgree

onchange=function(){
	vm.isAgree = this.checked
}

例：
<div id="app">
    姓名：<input :disabled="!isAgree"><br> 密码：
    <input :disabled="!isAgree"><br>
    <input type="checkbox" v-model="isAgree">同意<br>
    <button :disabled="!isAgree">注册</button>
</div>

data: {
    isAgree: false
}

4、双向绑定中可用watch机制，实时获得修改的新变量值：

何时：只要希望边修改边实时执行操作时：
如何：

data:{
	kwords:""
}
watch:{
	//和被监视的变量同名的元素
	kwords(function(){
		//执行操作
	})
}

只要通过斜体手段修改一次kwords变量的值，都会立刻触发一次kwords()函数，执行一次操作。

例：
<div id="app">
    <input v-model:input="kwords" @keyup.13="search">
    <button @click="search">百度一下</button>
</div>

data: {
    kwords: ''
},
methods: {
    search() {
        console.log(`查询${this.kwords}相关的内容...`)
    }
},
watch: {
    kwords() {
        this.search();
    }
}