单页面——vue3中computed计算属性和watch监听的写法
效果
实例
<template>
<div class="container">
<p>{{count}}</p>
<p>{{double}}</p>
<p>{{num}}</p>
<button class="btn btn-primary" @click="add" type="submit">+</button>
</div>
</template>
<script lang="ts">
import { defineComponent, computed ,ref} from 'vue';
import 'bootstrap/dist/css/bootstrap.min.css'
import axios from 'axios'
export default defineComponent({
name: 'App',
// setup 方 法还不能为空
setup(){
const count = ref(100);
const num = ref(0);
const double = computed(()=>{
return count.value* 2;
})
watch(count,(item)=>{
num .value=item*3
})
const add = ()=>{
count.value ++;
}
return {
count,
double,
num,
add
}
}
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>