v-show与v-if作用

一.v-show

控制元素显示, 通过display: none控制显示

语法: v-show=“变量或者表达式”

如果变量或者表达式为true, 会显示标签, 否则隐藏

二. v-if

v-if控制标签显示
语法: v-if=“变量或者表达式”
v-if通过控制标签是否删除显示 , v-if有性能优势

三. 代码示例

<template><div><h1 v-show="age >= 18">年满18岁才能看到以下内容</h1><hr><h1 v-if="age >= 18">年满18岁才能看到以下内容</h1></div>
</template><script>
export default {data() {return {age: 1,};},methods: {},
};
</script><style></style>

四.v-if-else

v-if可以和v-else搭配, 用来条件控制显示
v-if和v-else一定要是相邻元素
v-if和v-else-if还有v-else可以一起搭配, 实现多个条件判断
v-show是不可以和v-else搭配使用

代码示例

<template><div><h1 v-if="age >= 18">来吃榴莲</h1><h1 v-else>来吃甜甜圈</h1><h1 v-if="age < 18">甜甜圈</h1><h1 v-else-if="age < 60">枸杞泡水</h1><h1 v-else-if="age < 80">脑白金</h1><h1 v-else-if="age < 100">冬虫夏草</h1><h1 v-else>灵丹妙药</h1></div>
</template><script>
export default {data() {return {age: 18,};},methods: {},
};
</script><style></style>

vue基础-实现控制元素显示隐藏 v-show与v-if,以及v-if-else相关推荐

使用vue控制元素显示隐藏
HTML代码: <div title="意向价格" v-if="showPrise"></div><div title=" ...
jquery控制元素的隐藏和显示的几种方法。
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#id").hide ...
Vue+iview 密码框输入显示隐藏控制
Vue+iview 密码框输入控制显示隐藏 1. 背景 2. 最终效果 2.1 隐藏密码 2.2 显示密码 3. 实现步骤 3.1 使用v-if.v-else 3.2 密码隐藏 3.3 密码显示 3. ...
display none 隐藏后怎么显示_web前端入门到实战：元素显示隐藏的9种思路
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴 ...
纯css控制文字显示隐藏
纯css控制文字显示隐藏用到css 伪类 :checked :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框). html <div class=" ...
CSS常用技巧（元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美）
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
echarts 控制图例显示隐藏以及自适应的方法
当屏幕大小发生变化,echarts没有进行自适应,我们可以使用它的resize()方法去解决. 当echarts的组件放在el-tabs里面的el-tab-pane切换时,echarts的自适应会跟不 ...
百度地图添加标识物，并能控制标识物显示/隐藏
百度地图添加标识物,并能控制标识物显示/隐藏 <%@ page contentType="text/html;charset=UTF-8"%> <%@ inclu ...
vue控制元素的隐藏和显示
vue动态控制元素的隐藏和显示 <template><div @click="clickbj(i)"> //i 为父元素 for 循环的 index点击&l ...

vue基础-实现控制元素显示隐藏 v-show与v-if,以及v-if-else

v-show与v-if作用

一.v-show

二. v-if

三. 代码示例

四.v-if-else

vue基础-实现控制元素显示隐藏 v-show与v-if,以及v-if-else相关推荐

最新文章

热门文章