vue循环语句v-for中元素绑定值问题
Posted 左直拳
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
以上是关于vue循环语句v-for中元素绑定值问题的主要内容,如果未能解决你的问题,请参考以下文章