vue基础指令if和show的区别

v-if指令

(1)作用：根据条件渲染数据
(2)语法：
单分支： v-if="条件语句"
双分支： v-else
多分支: v-else-if="条件语句"
(3)注意点
v-else与v-else-if的前面必须要有 v-if 或者 v-else-if

    <div id="app"><!-- lazy :懒加载，输入框失去焦点vue才会渲染数据  --><input type="text" v-model.lazy="score" placeholder="请输入考试分数"><h2>你的考试分数为：{{ score }}</h2><hr><h3 v-if="score>=90">爸爸给你买法拉利</h3><h3 v-else-if="score>=80">爸爸给你买保时捷</h3><h3 v-else-if="score>=60">爸爸给你买奥迪</h3><h3 v-else>爸爸给你爱的掌声</h3></div>

v-show指令

(1)作用：设置元素的display属性值
(2)语法： v-show="属性值"
属性值为true: 元素的display:block
属性值为false: 元素的display:none
(3)v-show与v-if区别
v-if : 条件渲染。如果不满足条件，则该元素不会添加到DOM树中
v-show: 显示与隐藏。只是修改元素的display属性值

v-if与v-show的区别

1.v-if : 本质是在动态的创建或者删除元素节点
- 应用场景：如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if
  - v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销
2.v-show: 本质是在控制元素的 css 样式, display: none;
- 应用场景：如果是频繁的切换显示隐藏, 用 v-show
  - v-if, 频繁切换会大量的创建和删除元素, 消耗性能

vue基础指令if和show的区别相关推荐

vue基础1--脚手架的使用与vue基础指令
脚手架的使用与vue基础指令安装 vue-devtools 安装vscode插件 1. Vue基本概念 1.1 Vue是什么 1.2 Vue学习的方式 2. @vue/cli脚手架 2.1 @vue ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
【vue】1、vue介绍及vue基础指令
1.VUE介绍数据驱动视图:vue监听数据的改变,自动渲染界面,无需操作DOM. 双向数据绑定:数据源和界面上的数据保持一致,改变其中一个另一个也会发生改变. MVVM是实现vue数据驱动视图和数据 ...
vue学习资料：vue笔记ppt整理(vue基础指令vue基础语法)
vuejs基础语法:
vue基础指令的学习
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
Vue 基础之常用内置指令
Vue 基础之常用内置指令描述指令内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...

vue基础指令if和show的区别

vue基础指令if和show的区别相关推荐

最新文章

热门文章