vue的数据双向绑定：v-model

1、语法

• 基本语法： v-model.修饰符="data数据仓库中的变量"
  • 修饰符： lazy 
    • lazy: 将v-model的绑定事件由input改为change,
    • number:将输入的数据转换为number类型数据
    • trim: 将输入的数据去除首尾空格
  • data数据仓库中的变量
    • 只能是基础类型(string,number,boolean)，或者是复杂类型里面的单个属性或者单个元素
    • 不能使用简单表达式比如四则元素或者字符串拼接
  • 只能被用在输入型表单元素标签上，以及vue的组件上

    <div id="app">
        <p>{{ info }}</p>
        <input type="text" v-model="info">
        <input type="text" v-model="user.name">
        <input type="text" v-model="arr[0]">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
               info: '测试数据',// 字符串
               //info: 123, //数值
               //info: true,
               user:{
                 name:'tom'
               },
               arr:[1,5,9,10]
            }
        }) 
    </script>

2、原理：属性绑定，事件绑定

• input单行文本框： type = "text" | "color " | "range" | "date"
  • 事件绑定： @input 
  • 属性绑定： v-bind:value="属性值"

    <div id="app">
        <!-- type=text文本 -->
        <p>{{ inputText }}</p>
        <input type="text" :value="inputText" @input="setText($event)" >

        <!-- 根据拾色器更改文字颜色 -->
        <p :style="'color:'+inputColor">inputColor</p>
        <input type="color" :value="inputColor" @input="setColor($event)">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
               inputText: '测试数据',// 字符串
               inputColor:'#000000'
            },
            methods:{
                setText(e){
                    this.inputText = e.target.value;
                },
                setColor(e){
                    this.inputColor = e.target.value;
                }
            }
        }) 
    </script>

 

• textarea文本域
  • 事件绑定： @input 
  • 属性绑定： v-bind:value="属性值"
  • textarea标签上没有value属性，但它的DOM属性中有value属性，在textarea的正反标签中写值，实际上是往textarea的DOM属性innerHTML和textContent赋值，同时也会往复制一份值给DOM属性value 
  • 当我们修改textarea中的DOM属性value的值时，DOM属性的innerHTML和innerText并不会发生更改，即查看控制台element中的textarea元素正反标签中的值不会发生更改，但页面展示内容会更改成value的新值
  • 
  • 
• select下拉选框
  • 事件绑定：@change
  • 属性绑定: v-bind:value
  • select的选中值 当前选中的option存在value时返回value值，不存在value返回innerHTML

    <div id="app">
        <select name="" id="" @change="setSelect($event)" :value="selectText">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                selectText:"2"
            },
            methods:{
                setSelect(e){
                    this.selectText = e.target.value;
                }
            }
        }) 
    </script>

• input:"radio"单选按钮
  • 事件绑定：@change
  • 属性绑定：v-bind:checked : 该属性值来自于单选按钮的value值和内存中的值的比较结果
  • 如果单选按钮不提供value，内存值会变成null

    <div id="app">
        <input type="radio" value="1" name="ro" :checked="'1' == radioText" @change="setRadioText($event)">
        <input type="radio" value="2" name="ro" :checked="'2' == radioText" @change="setRadioText($event)">
        <input type="radio" value="3" name="ro" :checked="'3' == radioText" @change="setRadioText($event)">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                radioText:'2'
            },
            methods:{
                setRadioText(){
                    this.radioText = e.target.value;
                }
            }

        }) 
    </script>

• Input:"checkbox"复选框
  • 事件绑定： @change
  • 属性绑定: v-bind:checked
  • 如果复选框不提供value，内存值会变成null

    <div id="app">
        <input type="checkbox" value="1" :checked="checkboxText.indexOf('1')?false:true" @change="setCheckBoxText($event)">
        <input type="checkbox" value="2" :checked="checkboxText.indexOf('2')?false:true" @change="setCheckBoxText($event)">
        <input type="checkbox" value="3" :checked="checkboxText.indexOf('3')?false:true" @change="setCheckBoxText($event)">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                checkboxText:[]
            },
            methods:{
                setCheckBoxText(e){
                    if(this.checkboxText.indexOf(e.target.value) == -1){
                        this.checkboxText.push(e.target.value);
                    }else{
                        this.checkboxText.splice(this.checkboxText.indexOf(e.target.value),1);
                    }
                }
            }

        }) 
    </script>