Vue指令（四）--v-model

1、v-model的使用场景

1、v-model的使用，用于表单控件的数据绑定

2、v-model与value共同使用，实现选项框的选中事件，两者相同时，选中

3、v-model 与v-bind:value(:value)共同使用，实现数据的绑定：如单选框选中时，picked=value里的值

<div id="app" >
            <!-- v-model数据绑定 -->
            <input type="text" v-model="message" placeholder="输入。。。"/>
            <p>输入的内容是：{{message}}</p>

            <textarea v-model="message" placeholder="输入。。"></textarea>
            <!-- 单选框，使用v-model和value实现互斥，相等时选中 -->
            <input type="radio" v-model="picked" value="html" id="html"/>
            <label for=html >HTML</label>
            <input type="radio" v-model="picked" value="js" id="js"/>
            <label for=js >js</label>
            <input type="radio" v-model="picked" value="css" id="css"/>
            <label for=css >css</label>
            <!-- 多选框，checked，值是false和true根据选中与否，实现切换 -->
            <input type="checkbox" v-model="checked" id="checked"/>
            <label for=checked >选择状态{{checked}}</label>
            <!--  多选框，使用v-model和value实现多选，相等时选中 checked2为数组-->
            <input type="checkbox" v-model="checked2" value="html" id="html"/>
            <label for=html >HTML</label>
            <input type="checkbox" v-model="checked2" value="js" id="js"/>
            <label for=js >js</label>
            <input type="checkbox" v-model="checked2" value="css" id="css"/>
            <label for=css >css</label>

            <!-- options  multiple没有：单选，selected是一个字符串，多选，selected是一个数组-->
            <select v-model="selected" multiple>
                <option v-for="option in options" :value="option.value">{{option.text}}</option>
            </select>

            <!-- 绑定值 -->
            <input type="radio" v-model="picked" :value="value"/>
            <label>单选按钮</label>
            <p>{{picked}}</p>
            <p>{{value}}</p>

 　　　　　　<input type="radio" v-model="picked" :value="value"/>
            <label>单选按钮</label>
            <p>{{picked}}</p>
            <p>{{value}}</p>

</div> </body> </html> <script> var app = new Vue({ el:"#app", data:{ message:"33", picked:"js", value:"123", checked:false, checked2:["html","js"], selected:["html","js"], options:[ { text:"HTML", value:"html" }, { text:"JS", value:"js" }, { text:"CSS", value:"css" } ] } }); </script>

　2、v-model的修饰符　

.lazy

.number

.trim

<!--在失去焦点和回车时才会更新message数据-->
<input type="text" v-model.lazy="message"/>

<!--输入的数据转换成number的类型-->
<input type="number" v-model.number="message"/>

<!--自动过滤输入的首尾空格-->
<input type="text" v-model.trim="message"/>

Vue指令（四）--v-model

猜你喜欢