VUE中的v-model

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">testbutton>
        
        <button @click='change' type="button">changebutton>
    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">Aoption>
    	<option>Boption>
    	<option>Coption>
  select>
  <span>Selected: {{ selected }}span>
div>
<script>
    new Vue({
      el: '#app',
      data: {
        selected: ''
      }
    })
script>