Vue JS控制台模板錯誤“標簽<li>沒有匹配的結束標記。”</li>

Question

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

它給出了 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>)

Answer 1

您的代碼中有一些錯誤

這應該是正確的：

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

Answer 2

您的某些v-if語句是錯誤的。 你在v-if:中使用:而你應該使用=就像v-if=和v-else-if= 。

Answer 3

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

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>