前言
vue基础指令之v-if
提示：以下是本篇文章正文内容，下面案例可供参考
一.v-if 指令
1.v-if指令的作用是：根据表达式的真假切换元素的显示状态
2.本质是通过操纵dom元素来切换显示状态
3.表达式的值为true,元素存在于dom树中，为false,从dom树中移除
4.频繁的切换使用v-show,反之使用v-if,前者的切换消耗小
二.实例演示
1.示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<template v-if="loginType == 1">
<button @click="count++">加法</button>
</template>
<template v-else>
<button @click="count--">减法</button>
</template>
<div v-if="count>0">{{count}}</div>
<div v-if="Math.random()>0.5">Now You see</div>
<div v-else> YOu Can not see!</div>
<div v-show='error'>errors</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
loginType:1,
count:0,
error:false,
},
methods:{
}
});
</script>
总结
学习vue基础之v-if 指令与v-show指令
668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
