首页 技术 正文
技术 2022年11月23日
0 收藏 995 点赞 2,662 浏览 3223 个字

条件指令

所谓条件指令是指满足某个条件时执行哪部分代码,不满足条件时执行哪部分条件代码。vue条件指令有v-if,v-else-if,v-else三个,v-if条件渲染用来指示元素是否移除或者插入,根据表达式的值的真假条件渲染元素。

v-if示例

方式一使用v-if显示标签,当初始化值为true时,则显示第一个标签,当初始化值为false时,则显示第二个标签:

 <template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<span v-if="isshow">ishow为true我将首次展现</span>
<span v-if="!isshow">ishow为false我将首次展现</span>
</div>
</div>
</template> <script>
export default {
name: 'v-if',
data () {
return {
title: '条件渲染',
isshow: true
}
}
}
</script> <style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>

Vue学习之路6-条件渲染

Vue学习之路6-条件渲染

v-else-if

使用条件:v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后,当项目中有多个判断条件时使用。

使用方式一:使用字符串显示标签,当判断条件初始化值为字符串1时,则显示if标签,当判断条件初始化值不为字符串1时,则根据判断条件显示v-else-if条件标签,示例如下:

 <template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<span v-if="isshow==='1'">ishow为字符串类型1我将首次展现</span>
<span v-else-if="isshow==='2'">(elseif)否则ishow为字符串类型2我将首次展现</span>
<span v-else-if="isshow==='3'">(elseif)否则ishow为字符串类型3我将首次展现</span>
</div>
</div>
</template> <script>
export default {
name: 'v-if',
data () {
return {
title: '条件渲染',
isshow: ''
}
}
}
</script> <style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>

Vue学习之路6-条件渲染

Vue学习之路6-条件渲染

使用方式二:使用数字类型显示标签,当判断条件初始化值为数字类型1时,则显示if标签,当判断条件初始化值不为数字类型1时,则根据判断条件显示v-else-if条件标签,示例如下:

 <template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
<span v-else-if="isshow===2">(elseif)否则ishow为数字类型2我将首次展现</span>
<span v-else-if="isshow===3">(elseif)否则ishow为数字类型3我将首次展现</span>
</div>
</div>
</template> <script>
export default {
name: 'v-if',
data () {
return {
title: '条件渲染',
isshow:
}
}
}
</script> <style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>

Vue学习之路6-条件渲染

v-else示例

使用条件:v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

使用方式一:if-else类型,使用初始化bool值显示标签:

 <template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<span v-if="isshow">ishow为true我将首次展现</span>
<span v-if="!isshow">ishow为false我将首次展现</span>
</div>
</div>
</template> <script>
export default {
name: 'v-if',
data () {
return {
title: '条件渲染',
isshow: false
}
}
}
</script> <style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>

Vue学习之路6-条件渲染

Vue学习之路6-条件渲染

使用方式二:if-else类型,用字符串显示标签,当初始化值为字符串1时,显示if标签,当初始化值不为字符串1的时候,显示else标签,示例如下:

 <template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<span v-if="isshow==='1'">ishow为字符串1我将首次展现</span>
<span v-else>ishow不为字符串1我将首次展现</span>
</div>
</div>
</template> <script>
export default {
name: 'v-if',
data () {
return {
title: '条件渲染',
isshow: ''
}
}
}
</script> <style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>

Vue学习之路6-条件渲染

使用方式三:if-else类型,用数字类型显示标签,当初始化值为数字类型1时,显示if标签,当初始化值不为数字类型1的时候,显示else标签,示例如下:

 <template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
<span v-else>ishow不为数字类型1我将首次展现</span>
</div>
</div>
</template> <script>
export default {
name: 'v-if',
data () {
return {
title: '条件渲染',
isshow: ''
}
}
}
</script> <style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>

Vue学习之路6-条件渲染

使用方式四:if-elseif-else类型,当if和elseif条件都不满足时,显示else标签,示例如下:

 <template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
<span v-else-if="isshow===2">(elseif)否则ishow为数字类型2我将首次展现</span>
<span v-else>if-elseif条件都不满足,我将首次展现</span>
</div>
</div>
</template> <script>
export default {
name: 'v-if',
data () {
return {
title: '条件渲染',
isshow:
}
}
}
</script> <style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>

Vue学习之路6-条件渲染

总结:复杂的程序都是由简单的判断条件组合变化而成,在程序中灵活使用判断条件才是最重要的。

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141303.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,067
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,504
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,312
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,307
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,904
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,097
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站