Vue.js常用标签 v-model 入门

最新推荐文章于 2024-04-18 16:58:47 发布

俺不会写代码

最新推荐文章于 2024-04-18 16:58:47 发布

阅读量1.6k

点赞数 1

文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45267169/article/details/103576683

版权

今天自己学习了一下Vue.js的常用标签,用法比较简单,熟能生巧即可

v-model
作用:实现双向的数据绑定
a.由模型数据绑定到Dom对象,模型数据的值改变,Dom对象的值自动改变
b.由Dom对象绑定到模型数据,Dom对象的值改变,模型数据的值就改变
[在表单控件或者组件上下创建双向绑定,仅能在如下元素中使用]:
- input
- select
- textarea
- components(Vue中的组件)

<body>
    <!--实现功能 双向数据绑定计算-->
    <div id="app">
    	{{name}}
    	<input type="text" v-model="num1">+
        <input type="text" v-model="num2"> =   
  		{{Number.parseInt(num1)+Number.parseInt(num2)}}
    </div>
</body>
<script src="vue.min.js"></script>
<script>
    /*编写mvvm中的model部分,以及vm部分*/
    var VM = new Vue({
        el:"#app",
        data:{
            name:"双向绑定计算",
            num1:'2',
            num2:"2"
        }
    })
</script>

懒得写了…

俺不会写代码

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue.js常用标签 v-model 入门

今天自己学习了一下Vue.js的常用标签,用法比较简单,熟能生巧即可v-model作用:实现双向的数据绑定a.由模型数据绑定到Dom对象,模型数据的值改变,Dom对象的值自动改变b.由Dom对象绑定到模型数据,Dom对象的值改变,模型数据的值就改变[在表单控件或者组件上下创建双向绑定,仅能在如下元素中使用]:- input- select- textarea- componen...
复制链接

扫一扫