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

Simply put, I want to change the color of the first two texts of each line to white, but it doesn't work anyway. It is as if the span elements generated by js cannot be affected by css. Please see the picture for the specific code.

Sorry I'm not very good at using Stack Overflow yet, the code has been added.

enter image description here

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 >
        <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>

CodePudding user response：

Don't manipulate DOM directly!

Vue keeps a separate DOM structure (called virtual DOM) where it tracks all elements for reactivity. Whenever something reactive changes, the DOM node in the actual DOM of the page gets re-rendered. Why? Because it's a lot faster than tracking changes in DOM.

What this means is that whenever you change DOM directly, you will lose those mods whenever Vue re-renders.

You are supposed to handle your data in the component and allow Vue to render it using template structural directives (v-if, v-for, etc...).

In your case, that would look something like this (not sure what the word separator is):

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"
        :
        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"
        :
        v-text="item" />
  </ul>
</div>

Note: you can (and maybe should) create a method taking the item as a param and returning the correct classes for the item. This way you don't have to write your js into the template.

<li v-for="item in items" :>

component:

/* 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 }
}