【小白提问】关于vue中的mustache显现不出来

Question

我想做一个导航栏。。。

html如下:

    <div id="v3">
        <nav>
            <a v-for='nav in tags'
               :class="{'red': nav.isActive}"
               @mouseover='addColorTxt(nav)'
               @mouseout='recover(nav)'
            >{{nav.tag}}</a>
        </nav>
        <div id="txt">{{output}}</div>
    </div>

js如下:

let v3 = new Vue({
    el: '#v3',
    data: {
        tags: [{
                id: 0,
                tag: 'JS',
                isActive: false
            },
            {
                id: 1,
                tag: 'CSS',
                isActive: false
            },
            {
                id: 2,
                tag: 'HTML',
                isActive: false
            },
            {
                id: 4,
                tag: 'Browser',
                isActive: false
            }
        ],
        output: ''
    },
    methods:{
        addColorTxt: function(item){
            item.isActive = true;
            output = item.tag;
        },
        recover: function (item){
            item.isActive = false;
        }
    }
});

为什么#txt的div中{{output}}在mouseover的时候无法显示出来，但是output的值确实改变了; 如果一开始给output一个初始值“hello”, div中的内容就一直是hello，也不会改变。

不明白这是为什么？

Answer 1

你怎么看到 output值发生改变的？
确定不会出错吗
给output赋值请用

this.output = item.tag