我做錯了什么還是一個錯誤？我認為這是一個錯誤。以下代碼回傳 2 個具有相同文本的 div：'test1'。因為'v-once'。每個 div 都應該有相應的字串。
<script setup>
import { ref } from 'vue'
const testArray = ref([{
id:1,
string: 'test 1'
},{
id:2,
string: 'test 2'
}])
</script>
<template>
<div v-for="obj in testArray" :key='obj.id'>
<span v-once>{{obj.string}}</span>
</div>
</template>
操場：
https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgdGVzdEFycmF5ID0gcmVmKFt7XG5pZDoxLFxuc3RyaW5nOiAndGVzdCAxJ1xufSx7XG5pZDoyLFxuc3RyaW5nOiAndGVzdCAyJ1xufV0pXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuXHQ8ZGl2IHYtZm9yPVwib2JqIGluIHRlc3RBcnJheVwiIDprZXk9J29iai5pZCc XG4gICAgXHQ8c3BhbiB2LW9uY2U e3tvYmouc3RyaW5nfX08L3NwYW4 XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=
uj5u.com熱心網友回復：
將您移動v-once到帶有 的 div v-for。
<script setup>
import { ref } from 'vue';
const testArray = ref(
[
{
id:1,
str: 'test 1'
},
{
id:2,
str: 'test 2'
}
]
);
</script>
<template>
<div v-for="(obj) in testArray" :key='obj.id' v-once>
<span >{{obj.str}}</span>
</div>
</template>
https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSc7XG5cbmNvbnN0IHRlc3RBcnJheSA9IHJlZihcbiAgW1xuICAgIHtcbiAgICBpZDoxLFxuICAgIHN0cjogJ3Rlc3QgMSdcbiAgICB9LFxuICAgIHtcbiAgICBpZDoyLFxuICAgIHN0cjogJ3Rlc3QgMidcblx0XHR9XG4gIF1cbik7ICBcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU XG5cdDxkaXYgdi1mb3I9XCIob2JqKSBpbiB0ZXN0QXJyYXlcIiA6a2V5PSdvYmouaWQnIHYtb25jZT4gICAgXHRcbiAgICBcdDxzcGFuID57e29iai5zdHJ9fTwvc3Bhbj5cbiAgPC9kaXY XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==
uj5u.com熱心網友回復：
它正在渲染兩個 div，因為您正在遍歷具有兩個物件的陣列。它為每次迭代渲染一個 div（一次）。
v-once指令用于渲染元素only once，這意味著渲染后它將被視為靜態元素。
如果您進行任何更改testArray，則在呈現后，更改將不會在 DOM 上可見。我已經更新了您的代碼，您可以在下面的鏈接中查看。我渲染了兩次相同的文本，一個有v-once，另一個沒有。您可以看到v-once單擊按鈕時不更新的那個。
https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgdGVzdEFycmF5ID0gcmVmKFt7XG5pZDoxLFxuc3RyaW5nOiAndGVzdCAxJ1xufSx7XG5pZDoyLFxuc3RyaW5nOiAndGVzdCAyJ1xufV0pXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuXHQ8ZGl2IHYtZm9yPVwib2JqIGluIHRlc3RBcnJheVwiIDprZXk9J29iai5pZCc XG4gICAgXHQ8c3BhbiB2LW9uY2U e3tvYmouc3RyaW5nfX08L3NwYW4 XG4gICAgPGJyPlxuICAgIFx0PHNwYW4 e3tvYmouc3RyaW5nfX08L3NwYW4 XG4gIDwvZGl2PlxuICBcbiAgPGJ1dHRvbiBAY2xpY2s9XCJ0ZXN0QXJyYXlbMF0uc3RyaW5nID0gJ1VwZGF0ZWQgVGV4dCdcIj5cbiAgICAgVXBkYXRlXG4gIDwvYnV0dG9uPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359418.html
上一篇：LaravelAPIEloquentWhereClausewithVue不起作用
下一篇：Vue-動態組件事件監聽器