vue循环语句v-for中的元素绑定值
作者：左直拳
这篇文章主要介绍了vue循环语句v-for中的元素绑定值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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>
以上是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>
总结
响应式数据，就是可与用户或程序交互的数据。
vue中，声明响应式数据，可以使用ref和reactive。
二者的区别在于：
- ref用于指定的单个变量
- reactive用于复合变量
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
参考文章：
https://stackoverflow.com/questions/71414977/refs-inside-v-for-loop-for-vue-v3-2-25-or-above