vue循环语句v-for中元素绑定值问题- 前端开发

vue3跟vue2相比，有许多的变化。变得比较古怪。比如vue的王牌，页面元素与值双向绑定，所谓MVVM模式。在vue3中，要使用ref或reactive来处理，所谓响应式数据。这个响应式数据，就是在页面运行过程中，会与用户或程序交互，随之变化。如果元素对应的值，只是一次性指定，之后亘古不变，就不算响应式数据。

响应式数据，在vue3中咋处理呢？类似这样：

<template>
  <div>
    <a-checkable-tag v-model:checked="checked1" @change="handleChange">Tag1</a-checkable-tag>
    <a-checkable-tag v-model:checked="checked2" @change="handleChange">Tag2</a-checkable-tag>
    <a-checkable-tag v-model:checked="checked3" @change="handleChange">Tag3</a-checkable-tag>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    // or use watch
    const handleChange = checked => {
      console.log(checked);
    };

    return {
      handleChange,
      checked1: ref(false),
      checked2: ref(false),
      checked3: ref(false),
    };
  },

});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

以上是antd design vue里的示例代码
https://antdv.com/components/tag#components-tag-demo-status

效果就是点击标签，选中；再次点击，取消选中。
在这里插入图片描述
这个例子中，使用了ref。是因为绑定变量数量固定，可以预先声明。但如果数量未知、可变呢？

那应该使用reactive。reactive处理的对象是json，绑定变量可作为该json的一个元素。

<template>
  <div>
    <a-checkable-tag
      v-for="(tag, i) in tags"
      :key="tag"
      v-model:checked="checkeds[i]"
      @change="handleChange"
      >{{ tag }}</a-checkable-tag
    >
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
export default defineComponent({
  setup() {
    // or use watch
    const handleChange = (checked) => {
      console.log(checked);
    };
      
    const state = reactive({
      tags: [],
      checkeds: [],
    });

    onMounted(() => {
      state.tags = ["tag1", "tag2", "tag3", "tag4"];
      state.checkeds = [false, false, false, false];
    });

    return {
      ...toRefs(state),
      handleChange,
    };
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38