为什么我不能将此 span 元素的文本颜色设置为白色

Question

简单的说，我想把每一行的前两行文字的颜色改成白色，但是怎么也行不通。就好像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>

Answer 1

不要直接操作DOM！

Vue 保留一个单独的 DOM 结构（称为虚拟 DOM），它跟踪所有元素的反应性。每当反应发生变化时，页面实际 DOM 中的 DOM 节点将变为 re-rendered。为什么？因为它比跟踪 DOM.

中的变化要快得多

这意味着每当你直接更改 DOM 时，你将在 Vue re-renders.

时丢失那些 mods

您应该在组件中处理数据并允许 Vue 使用模板结构指令（v-if、v-for 等）呈现它。

在你的情况下，它看起来像这样（不确定单词分隔符是什么）：

Vue2:

new Vue({
  el: '#app',
  data: () => ({
    items: [
      'ニュース',
      'ストーリー',
      'スターフ＆キャスト',
      'キャラクター',
      '放送·配信情報'
    ]
  })
})

.highlighted { color: red }

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></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 }
}

为什么我不能将此 span 元素的文本颜色设置为白色

Why can't I set the text color of this span element to white

javascript

css

vue.js