码迷,mamicode.com
首页 > 其他好文 > 详细

Vue之v-model

时间:2020-01-22 18:11:07      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:arguments   管理   常见   input框   输入框   双向   span   示例   ext   

v-model

  • Vue中v-model能实现数据的双向绑定,实现父子组件通信...

1.v-model用在input元素上

  • 虽然Vue是单项数据流,v-model只是一个语法糖,实现双向数据的绑定:

    <input v-model="msg" />
    
    <input v-bind:value="msg" @input="msg = $event.target.value" />
    • 第一行代码等价于第二行

      input 元素本身有个 oninput 事件,这是 HTML5 新增加的,类似 onchange ,每当输入框内容发生变化,就会触发 oninput ,把最新的value传递给 msg

    给input标签添加v-model属性,默认会把value作为元素的属性,然后把input事件作为实时传递value的触发事件

  • 小示例:

    <div id="exp">
        <input type="text" v-model="msg">
        <span>{{msg}}</span>
    </div>
    <script>
        var vm = new Vue({
            // el限制一个vue实例的管理范围。
            el:"#exp",
            data:{
                msg:""
            }
        });
    
    </script>

2.v-model用在组件上

  • 当然v-model还可以用在组件上,更改子组件的值父组件的price也实时变化,以官方例子:

    <div id="exp2">
        <!-- 等价于  v-bind:value="price" @input="price = arguments[0]"-->
        <currency-input v-model="price"></currency-input>
        <span>{{price}}</span>
    </div>
        // 定义组件
        Vue.component('currency-input',{
            props:['value'],
            template:`
            <input ref="ipt" :value="value" @input="$emit('input',$event.target.value)">
            `
        });
    
    
    
        var vm2 = new Vue({
            el:"#exp2",
            data:{
                price:100
            }
        })

3.v-model缺点和解决方法

  • 在创建类似复选框或者单选框的常见组件时,v-model就不好用了。

  • 在input框解决方式

    <div id="exp3">
        <input type="checkbox" :checked="status" @change="status=$event.target.checked">
    </div>
    <script>
        var vm3 = new Vue({
            el:"#exp3",
            data:{
                status:false
            },
    
        })
    </script>
  • 当v-model用在组件上:

    <div id="exp4">
        <my-checkbox v-model="cks"></my-checkbox>
    </div>
    <script>
        Vue.component('my-checkbox',{
            props:['value'],
            template: `
                <input type="checkbox" :checked="value" @change="$emit('input',$event.target.checked)">
            `
        });
        var vm4 = new Vue({
            el:"#exp4",
            data:{
                cks:false
            }
        })
    </script>

Vue之v-model

标签:arguments   管理   常见   input框   输入框   双向   span   示例   ext   

原文地址:https://www.cnblogs.com/xujunkai/p/12228910.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!