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>
浏览量:加载中... 评论数:加载中...