v-model
v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素 。它负责监听用户的输入事件以更新数据。
<div id="app">
账号：
<input type="text" name="userid1" id="userid1" :value="userid1">
账号：
<input type="text" name="userid2" id="userid2" v-model="userid2">
<button @click='fn' type="button">test
</button>
<button @click='change' type="button">change
</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
userid:"我是userid1",
userid2:"我是userid2",
},
methods:{
fn(){
console.log(this.userid1,this.userid2)
},
change(){
this.userid="我是改过的userid"
}
}
})
</script>
在该例子中，可以看出没有加v-model的input标签，当用户在前端改变userid时，前端界面的userid改变了，但是JS里的数据不会改变。加有v-model的的input标签，当我们改变界面的userid时，JS里的数据也会随之改变，实现双向绑定。若不加v-model，却想改变JS里的数据，可以在JS里实现改变，但是不灵活。
利用v-model模仿百度搜索瀑布流的demo
<div id="app">
<input type="search" name='search1' id="search1" v-model="search" @input='searchone'>
<div v-for="obj in arr">{{obj}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
search:'',
arr: []
},
methods: {
searchone(){
var url = `http://suggestion.baidu.com/su?wd=${this.search}&cb=?`
$.getJSON(url,(data)=>{
this.arr = data.s;
})
}
}
})
</script>
vue的methods中的this与vm指向完全一致。若判定console.log(vm===this)，打印结果为true。
v-model表单补充
select下拉表单
单选时：绑定到一个字符串。①注意：这里v-model是绑定在select标签上。②当option没有设置value属性时，JS数据中的selected的值为option标签的值。③当option里面设置value值时，JS数据中的selected的值为option标签中value属性的值。例子如下：
<div id="app">
<select v-model="selected">
<option disabled value="">请选择
</option>
<option value="AA">A
</option>
<option>B
</option>
<option>C
</option>
</select>
<span>Selected: {{ selected }}
</span>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
