vue循環(huán)語句v-for中的元素綁定值

更新時間：2023年11月15日 10:28:56 作者：左直拳

這篇文章主要介紹了vue循環(huán)語句v-for中的元素綁定值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue循環(huán)語句v-for中的元素綁定值

vue3跟vue2相比，有許多的變化。變得比較古怪。

比如vue的王牌，頁面元素與值雙向綁定，所謂MVVM模式。

在vue3中，要使用ref或reactive來處理，所謂響應(yīng)式數(shù)據(jù)。

這個響應(yīng)式數(shù)據(jù)，就是在頁面運行過程中，會與用戶或程序交互，隨之變化。

如果元素對應(yīng)的值，只是一次性指定，之后亙古不變，就不算響應(yīng)式數(shù)據(jù)。

響應(yīng)式數(shù)據(jù)，在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>

以上是antd design vue里的示例代碼

https://antdv.com/components/tag#components-tag-demo-status

效果就是點擊標簽，選中；再次點擊，取消選中。

在這里插入圖片描述

這個例子中，使用了ref。

是因為綁定變量數(shù)量固定，可以預(yù)先聲明。

但如果數(shù)量未知、可變呢？

那應(yīng)該使用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>