Vue - v-if和v-else-if和v-else的使用
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
文章目录
一、简单的演示
<body>
<div id="app">
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=60">及格</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 90,
}
})
</script>
</body>
二、v-if的使用
通过 v-if 里面表达式的结果, 如果为true , 则显示当前行, 反之不显示.
<body>
<div id="app">
<!-- 当变量score大于等于90的时候, 当前行显示, 当小于90的时候, 当前行不显示 -->
<p v-if="score>=90">优秀</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 90,
}
})
</script>
</body>
三、v-if和v-else的使用
当v-if后面表达式的值为true的时候显示v-if所在的元素
当v-if后面表达式的值为false的时候显示v-else所在的元素
<body>
<div id="app">
<!-- 当变量score大于等于90的时候, 当前行显示, 当小于90的时候, 当前行不显示 -->
<!-- 当条件满足时显示当前行 -->
<p v-if="score>=90">优秀</p>
<!-- 当条件不满足时显示当前行 -->
<p v-else>其他</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 80,
}
})
</script>
</body>
三、v-if和v-else-if的使用
<body>
<div id="app">
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 50,
}
})
</script>
</body>
四、案例 (点击切换登录方式)
<body>
<div id="app">
<span>
<p v-if="isShow">用户账号: <input type="text"></p>
<p v-else>手机账号: <input type="text"></p>
<button @click="isShow = !isShow">切换类型</button>
</span>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isShow: true,
},
})
</script>
</body>
案例小问题
如果在有输入内容的情况下切换了类型, 我们会发现文字依然显示之前输入的内容.
这是因为Vue在进行DOM渲染时, 出于性能考虑, 会尽可能的复用已经存在的元素, 而不是重新创建新的元素
如果不希望Vue出现类型重复利用的问题, 可以给对应的input添加key, 并且保证key不同
<body>
<div id="app">
<span>
<p v-if="isShow">用户账号: <input type="text" key="key" placeholder="用户账号"></p>
<p v-else>手机账号: <input type="text" key="key2" placeholder="手机账号"></p>
<button @click="isShow = !isShow">切换类型</button>
</span>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isShow: true,
},
})
</script>
</body>
五、v-if和v-show对比
v-show的用法和v-if非常相似, 都是用于决定一个元素是否渲染.
v-if和v-show的区别
v-if当条件为false时, 不会有对应的元素在DOM中
v-show当条件为false时, 仅仅是将元素的display属性设置为none而已.
各自的使用场景
当需要在显示与隐藏之间切换很频繁时, 使用v-show
当只有一次切换时, 使用 v-if
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)