VueJS控制臺模板錯誤“標簽<li>沒有匹配的結束標簽。”

這是我的代碼片段，我用來根據角色名稱更改顏色

它給出了一個錯誤，即 li 標簽未正確關閉，但我看到標簽已關閉，但我在條件檢查期間發現了一些錯誤

如果我在條件檢查中做錯了什么，請告訴我

<div id="app">
        <ul>
            <li v-for="part in scene">
                <div v-if:"part.character === 'MACBETH'">
                <span style="color:red">{{part.character}}</span>
                <p style="color:red">{{part.dialogue}}</p>
                </div>
                <div v-else-if:"{{part.character}} === \"LADY MACBETH\"">
                <span style="color:blue">{{part.character}}</span>
                <p style="color:blue">{{part.dialogue}}</p>
                </div>
                <div v-else>
                <span>{{part.character}}</span>
                <p>{{part.dialogue}}</p>
                </div>
            </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?"}   
            ]
        }
        
    });
    </script>

控制臺錯誤

vue.js:634 [Vue warn]: Error compiling template:

tag <li> has no matching end tag.

1  |  <div id="app">
2  |        <ul>
3  |            <li v-for="part in scene">
   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^
4  |                  <div v-if:"part.character="==" 'macbeth'="">
5  |                <span style="color:red">{{part.character}}</span>

(found in <Root>)

uj5u.com熱心網友回復：

您的代碼中有一些錯誤

這應該是正確的：

<div id="app">
  <ul>
    <li v-for="part in scene">

 <!-- <div v-if:"part.character === 'MACBETH'"> -->
               ^
      <div v-if="part.character === 'MACBETH'">

        <span style="color:red">{{part.character}}</span>
        <p style="color:red">{{part.dialogue}}</p>
      </div>

 <!-- <div v-else-if:"{{part.character}} === \"LADY MACBETH\""> -->
                    ^ ^^              ^^     ^^            ^^
      <div v-else-if="part.character === 'LADY MACBETH'">

        <span style="color:blue">{{part.character}}</span>
        <p style="color:blue">{{part.dialogue}}</p>
      </div>
      <div v-else>
        <span>{{part.character}}</span>
        <p>{{part.dialogue}}</p>
      </div>
    </li>
  </ul>
</div>

uj5u.com熱心網友回復：

你的一些v-if陳述是錯誤的。當你應該使用like和:.v-if:=v-if=v-else-if=

uj5u.com熱心網友回復：

您的代碼中有一些錯誤，也許我遺漏了與實作相關的內容：

1. 在 v-if 和 v-else-if 陳述句中使用 =，您使用的是 :，因此將 v-if: 更改為 v-if=，與 v-else-if 相同

2. 這條線v-if="{{part.character}} === \"LADY MACBETH\""很奇怪，你應該使用part.character, 所以洗掉花括號{{ }}，并使用'LADY MACBETH'以便進行比較

讓我知道我是否遺漏了什么。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
        <ul>
            <li v-for="part in scene">
                <div v-if="part.character === 'MACBETH'">
                <span style="color:red">{{part.character}}</span>
                <p style="color:red">{{part.dialogue}}</p>
                </div>
                <div v-else-if="part.character === 'LADY MACBETH'">
                <span style="color:blue">{{part.character}}</span>
                <p style="color:blue">{{part.dialogue}}</p>
                </div>
                <div v-else>
                <span>{{part.character}}</span>
                <p>{{part.dialogue}}</p>
                </div>
            </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?"}   
            ]
        }
        
    });
    </script>

標籤：javascript html css Vue.js

上一篇：對React背景關系狀態的更新不會重新渲染子級

下一篇：(Spring)不滿足的依賴例外