是否可以使用 Vue 設定條件以根據末日加載的文本更改添加類?
我有一個帶有顏色名稱的串列
<span>yellow</span>
<span>red</span>
<span>grey</span>
我想創建一個條件,例如如果名稱文本是黃色我想添加類“color_yellow”等等
uj5u.com熱心網友回復:
嘗試如下代碼片段:
new Vue({
el: '#demo',
data() {
return {
colors: ['yellow', 'red', 'grey']
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
.color_yellow {
color: yellow;
}
.color_red {
color: red;
}
.color_grey {
color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<ul>
<li v-for="(color, i) in colors" :key="i">
<span :class="`color_${color}`">{{ color }}</span>
</li>
</div>
uj5u.com熱心網友回復:
你可以試試這個
<span :class="color.colorName">{{ color.colorName }}</span>
在 CSS 中,
.yellow { color: yellow }
.red { color: red }
更多細節可以查看https://vuejs.org/v2/guide/class-and-style.html
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/356435.html
標籤:javascript Vue.js
下一篇:排序陣列中缺少整數
