Vue 컴포넌트 내의 HTML에 적용되지 않는 CSS 스타일

Vue 컴포넌트 내의 HTML에 적용되지 않는 CSS 스타일

다음을 사용하여 회전 텍스트 애니메이션을 작성하려고 합니다.Vue.js이 코드펜을 영감으로 삼았어요

• 나는 모든 것을 얻었다.HMTL(즉, CodePen에서 언급한 바와 같이) 요소를 적절히 배치해야 합니다.요컨대:

  • 각 단어는 여러 개로 구성되어 있다<span>각 요소에는 문자가 하나씩 포함되어 있습니다.
  • 특정 시간 간격에 따라 각각<span>편지 한 통을 가지고 있는 사람은.in그리고..out CSS수업. 이 일은 무기한으로 계속됩니다.

  • 여기에서는 다음과 같이 표시됩니다.DOM:

    

• 문제는 어떤 일이 있어도CSS사용하고 있는 셀렉터, 타겟을 설정할 수 없습니다..in그리고..out수업할 때, 내가 하지 않는 한Developer Tools에Chrome:

  • 원본 출력:

    

  • 에 클래스를 추가한 후의 출력Developer Tools:

    

여기 제 최소 코드가 있습니다.Vue Component:

<template>
    <div id="app-loading">  
        <div class="words">
            <span v-for="setting in settings" v-html="setting.lettersHTML" :id="setting.id" class="word"></span>    
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                settings: [
                    { word: 'WordOne', id: 1, lettersArray: null, lettersHTML: null },
                    { word: 'WordTwo', id: 2, lettersArray: null, lettersHTML: null }
                ],
                currentWord: 1
            }
        },

        created() {
            this.splitLetters();
        },

        mounted() {
            setInterval(this.changeWord, 1500);
        },

        methods: {
            splitLetters() {
                this.settings.forEach((setting) => {
                    let letters = [];
                    for (let i = 0; i < setting.word.length; i++) {
                        let letter = `<span class="letter">${ setting.word.charAt(i) }</span>`;
                        letters.push(letter);
                    }
                    setting.lettersArray = letters;
                    setting.lettersHTML = letters.join('');
                });
            },

            changeWord() {
                let current = document.getElementById(this.currentWord).getElementsByTagName('span');
                let next = (this.currentWord == this.settings.length) ? document.getElementById(1).getElementsByTagName('span') : document.getElementById(this.currentWord + 1).getElementsByTagName('span');
                // Animate the letters in the current word.
                for (let i = 0; i < current.length; i++) {
                    this.animateLetterOut(current, i);
                }
                // Animate the letters in the next word.
                for (let i = 0; i < next.length; i++) {
                    this.animateLetterIn(next, i);
                }
                this.currentWord = (this.currentWord == this.settings.length) ? 1 : this.currentWord + 1;
            },

            animateLetterOut(current, index) {
                setTimeout(() => {
                    current[index].className = 'letter out';
                }, index * 300);
            },

            animateLetterIn(next, index) {
                setTimeout(() => {
                    next[index].className = 'letter in';
                }, 340 + (index * 300));
            }
        }
    }
</script>


<style lang="scss" scoped>
    #app-loading {
        font-size: 4rem;
    }

    .words, .word {
        border: 1px solid rosybrown;
    }

    .letter {
        text-decoration: underline; // Not working.
    }

    .letter.in {
        color: red; // Not working.
    }

    .letter.out {
        color: blue; // Not working.
    }
</style>

무엇이 잘못되어 이러한 수업을 적용할 수 없게 되었습니까?

사용하고 있다v-html단, 스코프 스타일에서는 사용할 수 없습니다.

작성한 DOM 콘텐츠v-html는 스코프 스타일의 영향을 받지 않지만 딥 셀렉터를 사용하여 스타일을 지정할 수 있습니다.

이 방법은 효과가 있었습니다.

<template>   
    <div class="a" v-html="content"></div> 
</template>

<script>   
    export default { 
        data() {
           return {
              content: 'this is a <a class="b">Test</a>',
           }
        },
    } 
</script>

<style scoped>   
.a ::v-deep .b { 
     color: red;
 }
</style>

네.

v-module

스코프 스타일에서는 동작하지 않습니다.

Brock Rece가 v-html을 사용한 Scoped Styles 기사에서 설명한 바와 같이 다음과 같이 해결되어야 합니다.

<template>   
    <div class="a" v-html="content"></div> 
</template>

<script>   
    export default { 
        data() {
           return {
              content: 'this is a <a class="b">Test</a>',
           }
        },
    } 
</script>

<style scoped>   
.a >>> .b {
color: red;   
}
</style>

언급URL : https://stackoverflow.com/questions/48331383/css-styles-not-being-applied-to-html-within-a-vue-component