I want to be a navigation bar.
html is as follows:
<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 is as follows:
let v3 = new Vue({
el: "-sharpv3",
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;
}
}
});Why {{output}} in the div of-sharptxt does not show up during mouseover, but the value of output does change; if you initially give output an initial value of "hello", the content in div will always be hello, and will not change.
I don"t understand why?