<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 数据、方法、计算属性、侦听器的使用</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// data & methods & computed & watcher
// computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存
// computed 和 watcher 都能实现的功能，建议使用 computed 因为更加简洁
const app = Vue.createApp({
data() {
return {
message: "hello world",
count: 2,
price: 5,
newTotal: 10,
}
},
watch: {
// price 发生变化时，函数会执行
price(current, prev) {
this.newTotal = current * this.count;
}
},
computed: {
// 当计算属性依赖的内容发生变更时，才会重新执行计算
total() {
return Date.now() + this.count;
// return this.count * this.price
}
},
methods: {
formatString(string) {
return string.toUpperCase();
},
// 只要页面重新渲染，才会重新计算
getTotal() {
return Date.now();
// return this.count * this.price;
},
},
template: `
<div> {{message}} {{newTotal}} </div>
`
});
const vm = app.mount('#root');
</script>
</html>vue 数据、方法、计算属性、侦听器的使用
最新推荐文章于 2024-02-29 13:24:28 发布
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
