簡單來說，就是想把每行前兩個文本的顏色改成白色，但是不管怎樣都行不通。就好像js生成的span元素不受css影響一樣。具體代碼請看圖片。
對不起，我還不太擅長使用 Stack Overflow，代碼已經添加。
export default {
mounted(){
console.log("Hello!")
let list = document.querySelectorAll('.shinchou-menu li a')
list.forEach( link => {
let letters = link.textContent.split("");
link.textContent = "";
letters.forEach((words, i) => {
let span = document.createElement("span");
span.textContent = words
if(i < 2){
span.className = "highlight"
}
span.style.transitionDelay = `${i/10}`
link.append(span);
})
})
}
}<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #fafafa;
}
</style>
<style lang="less" scoped>
.shinchou-menu {
--heightlight-text-color: #00ACF0;
list-style: none;
li {
a {
text-decoration: none;
display: inline-flex;
background: #000;
font-size: 1.6em;
font-weight: 700;
color: var(--heightlight-text-color);
padding: 4px;
margin: 6px 0;
span.highlight {
color: #FFF;
}
}
}
}
</style><template>
<div>
<ul class="shinchou-menu">
<li><a href="#">ニュース</a></li>
<li><a href="#">ストーリー</a></li>
<li><a href="#">スターフ＆キャスト</a></li>
<li><a href="#">キャラクター</a></li>
<li><a href="#">放送·配信情報</a></li>
</ul>
</div>
</template>uj5u.com熱心網友回復：
不要直接操作 DOM！
Vue 保留了一個單獨的 DOM 結構（稱為虛擬 DOM），它跟蹤所有元素的反應性。每當回應式發生變化時，頁面實際 DOM 中的 DOM 節點就會重新渲染。為什么？因為它比跟蹤 DOM 中的變化要快得多。
這意味著無論何時直接更改 DOM，只要 Vue 重新渲染，您就會丟失這些 mod。
您應該在組件中處理您的資料并允許 Vue 使用模板結構指令（ 、 等...）來呈現v-if它v-for。
在您的情況下，這看起來像這樣（不確定單詞分隔符是什么）：
Vue2：
顯示代碼片段
new Vue({
el: '#app',
data: () => ({
items: [
'ニュース',
'ストーリー',
'スターフ＆キャスト',
'キャラクター',
'放送·配信情報'
]
})
}).highlighted { color: red }<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
<ul>
<li v-for="item in items"
:class="{ highlighted: item.split('·').length > 1 }"
v-text="item" />
</ul>
</div>Vue3：
顯示代碼片段
Vue.createApp({
setup: () => ({
items: [
'ニュース',
'ストーリー',
'スターフ＆キャスト',
'キャラクター',
'放送·配信情報'
]
})
}).mount('#app').highlighted { color: red }<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
<ul>
<li v-for="item in items"
:class="{ highlighted: item.split('·').length > 1 }"
v-text="item" />
</ul>
</div>注意：您可以（也許應該）創建一個將專案作為引數并回傳專案的正確類的方法。這樣您就不必將 js 寫入模板。
<li v-for="item in items" :class="itemClasses(item)">
零件：
/* Options API syntax: */
methods: {
itemClasses(item) {
/* return string, array of strings or class object
docs: https://vuejs.org/guide/essentials/class-and-style.html
*/
}
}
/* (alternative) Composition API syntax : */
setup() {
// replace this function with your own logic
const itemClasses = item => item.split('·').length > 1;
return { itemClasses }
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467528.html
標籤：javascript css Vue.js
上一篇：如何獲得類懸停的索引？
下一篇：懸停時未出現元素