VUE之v-model

v-model

可以实现双向数据绑定：

　　　　a.由模型数据绑定到Dom对象，模型数据的值改变，Dom对象的值自动改变。

　　　　b.由Dom对象绑定到模型数据，Dom对象的值改变，模型数据的值自动改变。 

 

总结：v-model在表单控件或者组件上创建双向绑定

v-model只能在如下元素上使用：

input
select
textarea
componets(Vue中的组件)

实例代码：

<html lang="en">
                                                        <!--   实现1+1=2       -->
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令测试</title>
    <!--引用vue类库-->
    <script src="vue.min.js"></script>
</head>
<body>
<!--实现再body区域显示一个测试-->
<div id="app">
    {{name}}  <!--相当于MVVM的view视图-->

                                    <!-- //    a.由模型数据绑定到Dom对象，模型数据的值改变，Dom对象的值自动改变。-->
    <input type="test" v-model="num1" />+
    <input type="test" v-model="num2" >+
                                    <!--//     b.由Dom对象绑定到模型数据，Dom对象的值改变，模型数据的值自动改变。-->
    <!--/*避免字符串用Number.parseInt*/-->
    {{Number.parseInt(num1) + Number.parseInt(num2)}}
    <button >计算</button>
</div>
</body>
<script>
    //编写MVVM的model部分以及VM部分
    var VM = new Vue({
        el:'#app',  //VM接管了app区域的管理
        data:{      //model数据
            name:'测试',
            num1:1,
            num2:1

        }
    });
</script>
</html>

 

posted @ 2022-07-25 11:36  lksses  阅读(82)  评论(0)    收藏  举报