Vue.JS for 循環產生令人困惑的結果

Question

第一次嘗試一些 vue.js，我遇到了一個奇怪的問題。 現在我的目標是在不同角色的戲劇中使用獨特的線條顏色來設置文本樣式，這是我的代碼：

<div id="app">
    <ul>
        <li v-for="part in scene">
            <span v-if="part.character = 'MACBETH'">
                <p>{{part.character}}</p>
                <p  v-bind:style="'color:red;'" >{{part.dialogue}}</p>
            </span>
            <span v-else-if="part.character = 'LADY MACBETH'">
                <p>{{part.character}}</p>
                <p v-bind:style="'color:blue;'" >{{part.dialogue}}</p>
            </span>
        </li>
    </ul>
</div>

<script>
var app = new Vue({
    el: '#app',
    
    data:{
        //Scene from http://shakespeare.mit.edu/macbeth/macbeth.1.7.html
        scene:[
            {character:'MACBETH', dialogue:"Hath he ask'd for me?"},
            {character:'LADY MACBETH', dialogue:"Know you not he has?"},
            {character:'MACBETH', dialogue:"We will proceed no further in this business:\nHe hath honour'd me of late; and I have bought\nGolden opinions from all sorts of people,\nWhich would be worn now in their newest gloss,\nNot cast aside so soon."},
            {character:'LADY MACBETH', dialogue:"Was the hope drunk\nWherein you dress'd yourself? hath it slept since?\nAnd wakes it now, to look so green and pale\nAt what it did so freely? From this time\nSuch I account thy love. Art thou afeard\nTo be the same in thine own act and valour\nAs thou art in desire? Wouldst thou have that\nWhich thou esteem'st the ornament of life,\nAnd live a coward in thine own esteem,\nLetting 'I dare not' wait upon 'I would,'\nLike the poor cat i' the adage?"}   
        ]
        //Next line
        //MACBETH

        //Prithee, peace:
        //I dare do all that may become a man;
        //Who dares do more is none.
    }
    
});
</script>

預期的結果是麥克白的台詞顯示為紅色，麥克白夫人的台詞顯示為藍色，但是由於它目前的功能，我的 output 看起來像這樣：

角色名稱正在更改，麥克白夫人台詞的所有文字都是紅色而不是藍色。

任何指針？ 我對此很陌生，所以仍在嘗試弄清楚基礎知識。

Answer 1

您應該查看vue 文檔——如何根據條件設置元素樣式。 您可以像這樣使用:style binding或:class binding ：

 Vue.createApp({ data() { return { scene:[ {character:'MACBETH', dialogue:"Hath he ask'd for me?"}, {character:'LADY MACBETH', dialogue:"Know you not he has?"}, {character:'MACBETH', dialogue:"We will proceed no further in this business:\nHe hath honour'd me of late; and I have bought\nGolden opinions from all sorts of people,\nWhich would be worn now in their newest gloss,\nNot cast aside so soon."}, {character:'LADY MACBETH', dialogue:"Was the hope drunk\nWherein you dress'd yourself? hath it slept since?\nAnd wakes it now, to look so green and pale\nAt what it did so freely? From this time\nSuch I account thy love. Art thou afeard\nTo be the same in thine own act and valour\nAs thou art in desire? Wouldst thou have that\nWhich thou esteem'st the ornament of life,\nAnd live a coward in thine own esteem,\nLetting 'I dare not' wait upon 'I would,'\nLike the poor cat i' the adage?"} ] } }, methods: { } }).mount('#demo')

 .red { color: red; }.blue { color: blue; }

 <script src="https://unpkg.com/vue@next"></script> <div id="demo" class="demo"> <ul> <li v-for="part in scene":key="part.id"> <p>{{ part.character }}</p> <p:class="[ { 'red': part.character === 'MACBETH' }, { 'blue': part.character === 'LADY MACBETH' } ]" >{{part.dialogue}}</p> </li> </ul> </div>

使用這種方法，您可以刪除if/else條件以保持模板清潔。

Answer 2

在v-if / v-else-if指令中比較兩個值時，您需要使用==而不是= 。

<div id="app">
    <ul>
        <li v-for="part in scene">
            <span v-if="part.character == 'MACBETH'">
                <p>{{part.character}}</p>
                <p  v-bind:style="'color:red;'" >{{part.dialogue}}</p>
            </span>
            <span v-else-if="part.character == 'LADY MACBETH'">
                <p>{{part.character}}</p>
                <p v-bind:style="'color:blue;'" >{{part.dialogue}}</p>
            </span>
        </li>
    </ul>
</div>

<script>
var app = new Vue({
    el: '#app',
    
    data:{
        //Scene from http://shakespeare.mit.edu/macbeth/macbeth.1.7.html
        scene:[
            {character:'MACBETH', dialogue:"Hath he ask'd for me?"},
            {character:'LADY MACBETH', dialogue:"Know you not he has?"},
            {character:'MACBETH', dialogue:"We will proceed no further in this business:\nHe hath honour'd me of late; and I have bought\nGolden opinions from all sorts of people,\nWhich would be worn now in their newest gloss,\nNot cast aside so soon."},
            {character:'LADY MACBETH', dialogue:"Was the hope drunk\nWherein you dress'd yourself? hath it slept since?\nAnd wakes it now, to look so green and pale\nAt what it did so freely? From this time\nSuch I account thy love. Art thou afeard\nTo be the same in thine own act and valour\nAs thou art in desire? Wouldst thou have that\nWhich thou esteem'st the ornament of life,\nAnd live a coward in thine own esteem,\nLetting 'I dare not' wait upon 'I would,'\nLike the poor cat i' the adage?"}   
        ]
        //Next line
        //MACBETH

        //Prithee, peace:
        //I dare do all that may become a man;
        //Who dares do more is none.
    }
    
});
</script>

Answer 3

答案令人驚訝的是，沒有人添加非常重要v-for屬性 -> key 。

即使這不是缺少此屬性的問題，但建議始終將要添加的key作為最佳實踐。

如果每個迭代項都有一個 id，你可以這樣做：

v-for="part in scene" :key="part.id"

或者使用索引

v-for="(part,index) in scene" :key="part.index"

更多信息在這里