帮我用vue设计一个页面要求使用menthod、computed、watch、data
时间: 2023-05-28 08:02:37 浏览: 59
以下为一个简单示例:
<template>
<div>
<h1>{{ pageTitle }}</h1>
<h2 v-if="showSubtitle">{{ subtitle }}</h2>
<p>{{ message }}</p>
<button @click="addCount">Add Count</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
pageTitle: "Vue Page",
subtitle: "Subtitle",
showSubtitle: true,
message: "",
};
},
methods: {
addCount() {
this.count++;
},
},
computed: {
message() {
return `Count: ${this.count}`;
},
},
watch: {
count(newValue, oldValue) {
if (newValue > 5) {
this.showSubtitle = false;
}
},
},
};
</script>
在此示例中,我们使用了:
- data: 定义了组件中需要响应的数据
- methods: 定义了组件中的方法,这里我们定义了一个 addCount 的方法,用于增加 count 的值
- computed: 计算属性,根据组件 data 中的数据计算出动态值 message
- watch:监控 count 值的变化,当 count 大于 5 时,隐藏 subtitle
- template:使用 Vue 的模板语法展示数据和事件绑定。