小白自学Vue之v-if ,v-show,v-for自我总结第三篇!
<div id="root">
<!--如何实现点击按钮进行显示隐藏切换呢?此时就要用到v-if,在需要显示隐藏的div中写上v-if="show"等于show这个变量。切换就是现在显示,我点击要隐藏;如果是不显示的,我点击后要显示出来,实现代码如下,跟我来看下吧!-->
<div v-if="show">{{msg}}</div>
<button @click="handClick">toggle</button>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"小丸子",
show:true
},
methods:{
handClick:function(){
this.show=!this.show;
}
}
});
</script>
<div id="root">
<!--如何实现点击按钮进行显示隐藏切换呢?除了上述的v-if之外,还可以使用v-show。在需要显示隐藏的div中添加v-show="show",最后的事现效果你会发现和上面的一样,但是要注意观察。-->
<div v-show="show">{{msg}}</div>
<button @click="handClick">toggle</button>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"小丸子",
show:true
},
methods:{
handClick:function(){
this.show=!this.show;
}
}
});
</script>
<div id="root">
<!--想要实现list数据的循环加载显示在页面中怎么处理?实现代码如下-->
<ul>
<!--注意:1.用v-for的时候最好写上key属性,这样可以使每项循环的性能更好;并且远原来的v-for="item of list" 最好写成v-for="(item,index) of list" 并把此处的index的索引赋给key属性,代码如下所示-->
<li v-for="(item,index) of list" :key="index">{{item.i}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
list: [{
"i": "开森"
}, {
"i": "开森开森极了"
}, {
"i": "真呀么真开心~"
}, {
"i": "你真棒!!!"
}, {
"i": "兄弟,你太好了!"
}
]
}
});
</script>