Vue | 11.本地应用 - v-show指令

最新推荐文章于 2024-10-17 10:08:04 发布
最新推荐文章于 2024-10-17 10:08:04 发布
阅读量167 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyxyxyxyxyxyx/article/details/120500279
版权

文章目录

1.概述

  • v-show指令的作用是：根据boolean值切换元素的显示状态(不只是图片)
  • 原理是修改元素的display属性，实现显示/隐藏，隐藏为"display:none"
  • 指令后面的内容，最终都会被解析成boolean值(也可以写表达式)
  • 若没有Vue实例挂载在元素或其父元素上，单纯写v-show并没有效果

2.v-show指令

当Vue实例挂载在该元素或其父元素上以后，v-show便起作用了：

image-20210919173619464

3.进阶：搭配v-on切换元素展示状态

  • 创建引用名为imageVue的Vue实例，挂载到需要展示的元素上
  • image-20210919174724748
  • 创建一个新的Vue实例，挂载到按钮元素上
  • image-20210919175004326
xyx-Eshang
关注
专栏目录
Vue基础 第五讲笔记：v-show、v-if、v-bind
qq_49956121的博客
10-02 352
一、v-show 根据真假切换元素的显示状态。 注意： 1、原理是修改元素display，实现显示隐藏。 2、指令后面的内容，最终都会解释为布尔值。 3、值为true元素显示，值为false元素隐藏。 实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div
Element-ui-vue3-前端界面开发-配置-编辑main.js-nodejs基础语法-vue3-html模板语法-vue文件编译
插件开发
05-08 1348
在 Vue 3 中，计算属性（Computed Properties）是一种强大的功能，它允许你声明一个依赖于其他响应式数据属性的属性，并且这个属性的值会根据其依赖的数据的变化而自动更新。在Vue3中，setup函数中的this指向的是undefined，因为setup函数是在组件实例化之前执行的，此时还没有this对象。组件中的data是一个函数，他返回一个data对象，里面包含着用户定义的组件的属性变量，当根组件挂载到某个DOM元素上创建好组件实例后，Vue将data以$data的形式存在于组件中。
vue 条件渲染 v-if和v-show 及二者比较
m0_61384067的博客
11-01 683
条件渲染 v-if和v-show各自基本知识，及二者区别
Vue.js基础-03-条件语句（v-if/v-show）
运维玄德公
05-14 2493
文章目录1. v-if1.1 v-if语法示例完整示例1.2 v-else语法示例完整示例1.3 v-else-if语法示例完整示例多个v-else-if 的判断逻辑2. v-show2.1 使用语法示例完整示例2.2 和v-if 比较 1. v-if 1.1 v-if 语法示例 <p v-if="show">甲</p> 完整示例 如下： 如果show是false，则甲不会显示。 如果ok是flase template中 三奇六仪的信息都不会显示 但是show和template
vue指令之v-show的用法
热门推荐
perry
05-23 15万+
1、判断谋个元素是否显示或隐藏&lt;el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary"&gt;去上传&lt;i class="el-icon-upload el-icon--right"&gt;&lt;/i&gt;&lt;/el-but
v-if与v-show二者性能比较
喵大嗷的博客
07-23 8434
先来说说v-if v-if:根据表达式的值在DOM中生成或者移除一个元素，值是false就会在DOM中删除，反之会克隆相应元素到DOM中 支持加在&lt;template&gt;标签上 再说说v-show v-show是根据表达式的值来显示或者隐藏元素，根据的是display的值 不支持加在&lt;template&gt;标签上 划重点 在切换v-if的时候，vue内部有一个局部...
23课 Vue基础-第2天-{Vue基础}.rar
09-13
7. **指令与修饰符**：Vue提供一系列指令，如`v-show`（与`v-if`类似但不删除元素）、`v-bind:class`（动态绑定类）、`v-on:keyup.enter`（监听按键事件）。修饰符如`.prevent`、`.once`等，用于增强指令的功能。 8...
vue小白教程-3 本地应用指令下 （v-bind、v-for、v-model）
weixin_40020935的博客
09-01 195
vue指令可以分为： ●内容绑定，事件绑定 ●显示切换，属性绑定 ●列表循环，表单元素绑定 4.v-show 根据表达值的真假，切换元素的显示与隐藏，指令后面内容最终都会解析为布尔值 true显示 false隐藏。 5.v-if 和v-show几乎同用法， 点击按...
vue初级资料--------新手上路
07-22
2. 指令，如v-model用于双向数据绑定，v-if和v-else控制条件渲染，v-show控制元素的显隐。 例如，要在Vue实例中声明一个数据，并在页面上展示，可以这样做： ```html <p>{{greeting}} var app = new Vue({ el:...
vue.js-expi
03-30
9. **指令与过滤器**：Vue还提供了丰富的内置指令（如v-show、v-pre等）和过滤器，用于处理DOM和数据。"vue.js-expi"可能包含它们的使用示例。 10. **单元测试**：为了确保代码质量，Vue应用通常会进行单元测试。...
v-show
涂涂
01-18 7553
1.根据表达式之真假值，切换元素的 display CSS 属性。eg 点击按钮我就消失 export default { name: 'HelloWorld', data () { return { hide : true } }, methods:{ greet: function () { thi
V-show的正确使用方法
m0_62165756的博客
05-07 2万+
1.v-show指令的作用是：根据切换元素的显示状态 2.原理是修改元素 的display，实现显示隐藏 3.通过判断自定义值为true或false进行隐藏显示 下列是v-show最基本的引用方式 <template> <view class="" > <image src="../../static/c1.png" @click="cj()"></image> <input type="text" value="" placeholder="
vue中v-show的使用
芋泥啵啵月亮的博客
07-10 2万+
除了 v-if，v-show也是用来决定某一个元素是否在页面中显示出来。当经常需要切换某个元素的显示与隐藏时，使用v-show会更加节省性能上的开销，当只需要一次显示或隐藏时，使用v-if更合理。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
Vue中v-if和v-show的使用场景
weixin_34049032的博客
06-17 911
1. 官方文档 https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show 2. v-if 和 v-show 的区别 2.1 官方解释 v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开...
v-show简单使用
zds456的博客
11-24 7414
&lt;template&gt; &lt;div class="kefuOnline" @click="diminish()"&gt; &lt;p v-show="show"&gt;想买什么样的车？'老司机'帮你选&lt;/p&gt; &lt;img src="../../../static/images/kefu.jpg" alt=&
Vue指令之v-show篇
孤岛的鲸
09-16 14万+
扯到v-show就不得不说说他老人家和v-if 的藕断丝连了 我先试着扯一扯： v-if 呢如果条件为false，那么在生成的HTML语句中，条件为false的标签不会生成在代码中 例如： 代码： 运行后： 浏览器输出： 有没有发现，&lt;h1 v-if="error"&gt;Error!&lt;/h1&gt;这部分在运行后没有生成 v-show呢如果条件为false...
vue中v-show与v-if使用与简单的应用场景
weixin_36562747的博客
09-19 5421
浅层次的讲下使用与区别： 此次只针对渲染方向 v—show，顾名思义，vue中通过值来判断是否显示加载并显示， v-if，通过值来来判断是否加载， 看起来几户一样，具体实现原理不同，简单的讲就是v-show是一直都有将元素加载，只是将元素设置为display，v-if则是判断值是否为真来选择是否加载元素。直白的说，就是如果v-show包含的元素中含有自动执行的方法，即使v-show的对应的值为假不...
jeecg3版本的vue，离线启动
sharesb的博客
10-16 398
jeecg的vue2版本已经停止维护，所以只能用vue3的版本。3版本中使用的是pnpm（npm的增强版本）下载依赖。使用pnpm安装的node_modules，不能直接复制到离线主机中（因为在 pnpm安装过程中，会给依赖的配置文件写死绝对路径，并且会在c盘生成缓存）。所以要在离线主机中启动，需要1.在联网机器上下载依赖保存到某个文件夹2.在离线主机中安装node，并配置环境变量3.在离线主机中，让npm加载第一步下载的依赖4.在离线主机中，npm正常安装。
vue2项目 实现上边两个下拉框,下边一个输入框 输入框内显示的值为[“第一个下拉框选中值“ -- “第二个下拉框选中的值“]
最新发布
xu_duo_i的博客
10-17 291
vue2项目 实现上边两个下拉框,下边一个输入框 输入框内显示的值为["第一个下拉框选中值" -- "第二个下拉框选中的值"]
Vue.js入门教程：从基础到组件开发
Vue.js提供了`v-if`和`v-else`指令来实现条件渲染，以及`v-for`指令进行数据循环，使得动态展示和操作数据变得简单。 4. **处理用户输入** Vue.js通过`v-model`指令实现双向数据绑定，可以轻松地在DOM元素（如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值