VUE实例2
VUE实例2
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="firstVue">
<!-- 数据绑定从vue实例传送数据到DOM，
而v-model语法糖实现了vue数据反向传输，DOM(input标签)——>VUE -->
<input type="number" v-model.number="step" />
<!--v-on:绑定事件，v-on:语法可以缩写@-->
<button v-on:click="clickButton">Add</button>
<!--双大括号是mustache语法，数据绑定-->
<p>{{total}}</p>
<!--v-bind绑定HTML标签属性，可以缩写成冒号:-->
<input type="button" v-bind:disabled="show" value="奇偶切换">
</div>
</body>
<script type="text/javascript">
//新建vue对象
var myVue = new Vue({
//el是Vue的保留字，用来指定实例化的DOM的ID号
el:'#firstVue', //#是标签选择器，选择ID=“firstVue”的标签
data:{//data参数绑定VUE实例的数据变量，不同变量逗号分隔
step: 1,
total: 0,
show: true
},
methods:{//函数定义
clickButton:function(){
//this引用vue实例里的局部变量
this.total += this.step
if(this.total%2==0){
this.show=true
}else{
this.show=false
}
}
}
})
//new Vue({})新建vue实例
//v-bind:和{{}}双大括号语法在html中绑定变量
//v-on: 和 @ 语法绑定函数到标签的事件
//v-model: 语法使用户的页面输入反向传递回vue实例变量
</script>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/11/09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
