0
228
Views¿Por qué no puedo establecer el color del texto de este elemento de intervalo en blanco?
En pocas palabras, quiero cambiar el color de los dos primeros textos de cada línea a blanco, pero de todos modos no funciona. Es como si los elementos span generados por js no pudieran verse afectados por css. Por favor, vea la imagen para el código específico.
Lo siento, todavía no soy muy bueno usando Stack Overflow, se agregó el código.
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>1 answers
Answer question0
¡No manipule DOM directamente!
Vue mantiene una estructura DOM separada (llamada DOM virtual) donde rastrea la reactividad de todos los elementos. Cada vez que algo reactivo cambia, el nodo DOM en el DOM real de la página se vuelve a representar. ¿Por qué? Porque es mucho más rápido que rastrear cambios en DOM.
Lo que esto significa es que cada vez que cambie DOM directamente, perderá esas modificaciones cada vez que Vue vuelva a renderizar.
Se supone que debe manejar sus datos en el componente y permitir que Vue los represente utilizando directivas estructurales de plantilla ( v-if , v-for , etc.).
En su caso, se vería así (no estoy seguro de cuál es la palabra separador):
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>Nota: puede (y tal vez debería ) crear un método que tome el elemento como un parámetro y devuelva las clases correctas para el elemento. De esta manera, no tiene que escribir su js en la plantilla.
<li v-for="item in items" :class="itemClasses(item)">componente:
/* 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 } }