Vue | 12.本地应用 - v-if指令

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

文章目录

1.概述

  • v-if指令的作用是：根据表达式的真假，从DOM树中操作元素
  • 表达式为true，则将元素存放在DOM树中
  • 表达式为false，则将元素从DOM树移除
  • 从DOM树中操作，性能非常低，因此尽量使用v-show

2.实践：年龄>18时显示黄图

先创建Vue实例，设置好"age"用以判断

image-20210919183219661

设置被挂载的元素(将id设为"yellow")，并添加v-if属性

image-20210919183519183

未满18岁时：

image-20210919183601964

满18岁后：

image-20210919183719917

3.尽量不使用v-if

  • v-if是直接从DOM树中操作元素(添加/移除元素)，性能很低

  • v-show是设置元素的display，隐藏时"display:none"，性能相比较高！

  • v-show也可以使用表达式！因此用v-show就对了！

xyx-Eshang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node-v14.16.0-x64
09-22
4. **指令系统**：Vue.js提供了一系列内置指令（如v-if、v-for、v-bind等），方便处理常见的DOM操作。 结合压缩包子文件的文件名称“node-v14.16.0-x64.msi”，这是一个Windows Installer包，用于在Windows操作系统...
vue-admin.zip
04-01
- **指令系统**: 如v-bind, v-on, v-if/else, v-for等，用于简化DOM操作。 - **组件化**: Vue的核心特性，允许我们将UI拆分为可复用的组件。 - **计算属性与侦听器**: 计算属性用于基于其他数据生成值，侦听器...
vue自定义指令实现方法详解
01-21
本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考，具体如下： vue中的指令就是v-on v-bind v-show等等，那么自定义指令是什么呢？ 自己定义的指令就是自定义指令。 语法： Vue.directive(id, definition) 这里可以参考vue中的指令 <h1 v-if=”yes”>Yes</h1> 其中，if就是指令ID，yes是expression Vue.directive()传入接受两个参数，id是指指令ID，definition是指定义对象。其中，定义对象可以提供一些钩子函数。 钩子函数： bind – inserted：被绑定元素插入父节点时调
vue 自定义指令 自己实现 v-if 和 v-show
^_^
08-01 4444
通过自定义指令实现v-if 和 v-show ，v-show 就是把当前元素 设置display:none / block 来控制显隐，而 v-if 来把当前页面元素是否删除
vue自定义指令
Rookie_a的博客
11-09 328
vue 常用指令 v-if指令 v-show指令 v-else指令 v-for指令 v-bind指令 v-model v-on指令 v-text指令 v-html指令 v-if v-else与 v-show 使用 <div id="app"> <p v-if="yes">我是yes</p> <!-- v-else要和v-if搭配使用 --> <p v-if
Vue第三章 自定义指令、axios、网络请求、v-if（附带详细代码）
a2499797637的博客
10-06 491
一、自定义指令 二、axios 三、网络请求 四、v-if
VUE 用自定义指令实现v-if的效果，不是display:none
庆.Gavino的博客
12-02 1982
VUE 用自定义指令实现v-if的效果，不是display:none
vue-project.zip
最新发布
05-06
Vue.js 提供了一套指令，如`v-if`, `v-for`, `v-bind`, `v-on`等，它们是带有前缀`v-`的特殊属性，用于在模板中表达逻辑控制和事件处理。 6. **响应式数据绑定**： Vue.js 的数据模型是响应式的。当数据发生变化...
vue-admin-template-master.zip
01-08
3. **指令系统**：Vue.js提供了一些预定义的指令，如`v-if`、`v-for`、`v-bind`等，它们是增强HTML的特殊属性，用于处理DOM的动态行为。 4. **单文件组件（Single File Components, SFC）**：Vue.js允许在单个`.vue...
Vue.js前端开发实战-PPT.rar
07-10
- **指令**：如v-if/v-else、v-for、v-bind和v-on等，用于控制DOM行为。 - **计算属性**：基于其他数据动态计算值，自动跟踪依赖并缓存结果。 - **侦听器**：通过v-on监听事件，处理用户交互。 4. **组件**： -...
对vue中v-if的常见使用方法详解
10-17
今天小编就为大家分享一篇对vue中v-if的常见使用方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
[vue]vue条件渲染v-if(template)和自定义指令directives
weixin_30550271的博客
05-11 483
条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <div v-show="false">yes</div> <!--<div v-else>no</div>--> <h1>...
自定义指令
weixin_56847152的博客
08-24 938
1. 什么是自定义指令 vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。
自定义指令directive 配置v-if or v-show权限显隐
不正经的博客
06-16 1458
我们可以通过全局自定义指令来处理判断条件繁琐且多个地方需要判断（v-if / v-show）。 先在新建个 array.js 文件，用于存放与权限相关的全局函数； array.js内容 exportfunctioncheckArray(key){ letarr=['1','2','3','4','demo'] letindex=arr.indexOf(key) if(index>-1){ retu...
v-if、v-show与自定义指令
weixin_44689966的博客
06-10 380
自定义指令
动态组件 & 插槽 & 自定义指令
kaieew12345的博客
08-18 566
1. 什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 2. 如何实现动态组件渲染 vue 提供了一个内置的 组件，专门用来实现动态组件的渲染。示例代码如下： 3. 使用 keep-alive 保持状态 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组 件的状态。示例代码如下： 4. keep-alive 对应的生命周期函数 当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。 当组件被激活时，会自动触发组件的 activated
基于VUE2 v-if、v-show指令源码分析及原生代码简单实现v-if、v-show指令
My_Soul_的博客
11-10 2281
源码分析vue2中的v-if和v-show指令，并通过原生js代码简单实现v-if和v-show指令
VUE3 自定义标签/v-if 按钮权限控制
qq_41834408的博客
04-18 3095
1、自定义标签 使用了：vue3directive 把数据放在store中，在切换路由时（单点嵌入），也可以在登陆时加载Store数据； 加载数据JS如下 export function getUserBtnInfo() { let createUser= ""; if (window.parent.getUserName) { createUser=window.parent.getUserName(); } return new Promise((resol
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、付费专栏及课程。

余额充值