利用计算属性computed做了个简单的两个数相加的效果，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<input type="text" name="text" name="num1" v-model="num1" />+
<input type="text" name="text" name="num2" v-model="num2" />={{sum}}
<script>
new Vue({
el:"body",
data:{
num1:"",
num2:""
},
computed:{
sum:function(){
return Number(this.num1)+ Number(this.num2)
}
}
})
</script>
</body>
</html>其实现的效果图如下：
当你往输入框输入数字，等于后面的结果会同步计算。
利用侦听属性$watch做了个简单点赞状态的监听事件，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<button @click="btn">点赞</button>
<P>状态{{info}}{{c}}</P>
<script>
var ve=new Vue({
el:"body",
data:{
count:0,
info:"未点赞",
c:0
},
methods:{
btn:function(){
this.count++
}
}
})
ve.$watch("count",function(val){
this.info="已点赞";
this.c=val
})
</script>
</body>
</html>其实现的效果图如下：
当未点击点赞按钮时，状态为未点赞
当点击点赞点赞状态时，状态发生改变，并且点赞次数以点击点赞按钮的次数为准
今天是元气满满的一天，加油！