本文介绍了Vue.js中methods用于处理点击事件，例如更新数据；computed作为计算属性，自动响应数据变化并更新视图；watch则用于监听数据变化，执行相应逻辑。示例展示了这三个概念的基本用法。
1.methods：
用法:当有点击事件的时候用
<p>{{a}}</p>
<button @click="as">点击事件</button>
let vm = new Vue({
data: {
a: 1
},
methods: {
as() {
this.a++
}
}
})
console.log(vm.a)// 2
2.computed：计算属性
用法：
<body>
<div id="root">
姓：<input type="text" v-model="firstName" /><br><br>
名：<input type="text" v-model="lastName" /><br><br>
测试：<input type="text" v-model="x" /><br><br>
全名：<span>{{fullName}}</span>
</div>
</body>
</html>
<script>
const vm = new Vue({
el: "#root",
data: {
firstName: "张",
lastName: "三",
x: "你好"
},
computed: {
fullName: {
/**
* get有什么作用？当有人读取fullName时，且返回值就作为fullName的值
* get什么时候调用？
* 1.初次读取fullName时
* 2.所依赖的数据发生变化时
*/
get() {
return this.firstName + this.lastName
},
set(value) {
console.log("set",value)
const arr = value.split("-")
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>3.watch：监听属性
用法：
watch: {
被监听的数据: {
handler(数据改变后的值, 数据改变之前的值) {
相关代码逻辑...
}
}
}
扫一扫
77
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
