Vue
Vue 3.2
js写法
1<template>
2 <view>
3 <button @tap="test">{{name}}</button>
4 </view>
5</template>
6
7<script setup>
8 import {
9 computed,
10 reactive,
11 ref
12 } from 'vue';
13 const name = ref("哈哈")
14 const list = reactive({
15 a: 1,
16 b: 2
17 })
18 const sun = computed(() => {
19 return name.value + list.b
20 })
21
22 function test() {
23 name.value = "笨蛋";
24 console.log(list)
25 }
26
27</script>
28
29<style>
30</style>
Vue 3.0
1<template>
2 <view>
3 <button @tap="test">{{name}}</button>
4 </view>
5</template>
6
7<script>
8 import {
9 ref
10 } from 'vue';
11 export default {
12 setup() {
13 const name = ref("哈哈");
14 function test() {
15 name.value = "笨蛋"
16 }
17 return {
18 name,
19 test
20 };
21 }
22 }
23</script>
24
25<style>
26</style>
Vue 2.0
1<template>
2 <view>
3 <button @tap="test">{{name}}</button>
4 </view>
5</template>
6
7<script>
8 export default {
9 data() {
10 return {
11 name: "哈哈",
12 }
13 },
14 methods: {
15 test() {
16 this.name="笨蛋";
17 }
18 }
19 }
20</script>
21
22<style>
23</style>
浏览量:加载中... 评论数:加载中...