Vue中的计算属性和侦听器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue中的计算属性和侦听器</title>
<!--1 引入Vue库-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980-->
姓:<input v-model:value="firstName" />
名:<input v-model:value="lastName" />
<div>
{{fullName}}
</div>
<div>
{{count}}
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
firstName: ‘‘,
lastName: ‘‘,
count:0
},
computed: {//1 computed 是Vue中的计算属性,如果内容没有改变，则取上一次的计算结果，所以速度很快
fullName: function () {
return this.firstName + ‘ ‘ + this.lastName;
}
},
watch: {//2 watch侦听器
//监听fullName变化，一旦该fullName变化，则执行方法中内容
fullName: function () {
this.count++
}
}
});
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/Torey/p/10015468.html
时间： 2024-10-15 07:18:42