条件渲染指令
v-if:动态的移除元素或者动态的创建元素
当初始状态是flase,默认不需要展示,而且后期也很有可能不需展示时用v-if
v-show:修改dispaly的属性值(适用于频繁切换元素)
dispaly:none 实现元素的显示和隐藏
3.在实际开发中,绝大多数时候不需要考虑性能问题直接使用v-if
v-if配套指令(v-else-if)
注意:v-else-if必须配合v-if指令一起使用否则不会识别
<div v-if="type === 'A'">优</div>
<div v-else-if="type === 'B'">良</div>
<div v-else-if="type === 'C'">中</div>
<div v-else="type === 'D'">差</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
username:"zhangsan",
n1:1,
n2:2,
type:"J"
},
methods: {
showName(){
console.log('用户名:'+this.username)
}
},
})
</script>