Loading... ``` <template> <button v-on:click="clickAction">count in {{ count }}</button> <h1>{{ count }}</h1> <h1>{{ count+10 }}</h1> <h1>{{ count%2?'yes':'no' }}</h1> <h1>{{ f(count) }}</h1> </template> <!-- 第一种：选择式API（vue2） --> <!-- <script> export default { data() { return { count: 0 } }, methods: { clickAction() { this.count++ } } } </script> --> <!-- 第二种：组合式API （vue3） setup()函数 --> <!-- <script> import { ref } from 'vue' export default { setup() { const count = ref(0) console.log(count) function clickAction() { count.value++ } return { count, clickAction } } } </script> --> <!-- 第三种：组合式API（vue3） setup语法糖 --> <script setup> import { ref } from "vue"; const count = ref(0); function clickAction() { count.value++; } </script> <style lang="scss" scoped> </style> ``` 最后修改：2024 年 03 月 29 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请点个赞哦
1 条评论
兄弟写的非常好 https://www.cscnn.com/