Vue3。 v-if指令使用

最新推荐文章于 2024-03-25 16:59:56 发布
最新推荐文章于 2024-03-25 16:59:56 发布
阅读量303 收藏
点赞数 1
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JD_00top/article/details/128228557
版权

<body>

    <div id="root"></div>

<script>

    Vue.createApp({

        data(){

            return {

                show: true,

                content: 'hello world'

            }

        },

        methods: {

            handleBtnClick(){

                this.show = !this.show

            }

        },

        template: `

        <div>

             <span v-if='show'>{{ content }}</span>

            <button v-on:click='handleBtnClick'>展示或者隐藏</button>

        </div>

        `

    }).mount('#root')

</script>

</body>

JD_00top
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中的v-show和v-if指令的区别是什么？
10-16
Vue 中的 v-show 和 v-if 指令的区别 Vue 中的 v-show 和 v-if 指令都是用于控制元素的显示和隐藏的，但它们有着不同的实现机制和应用场景。 v-show 指令是通过修改元素的 CSS 属性来控制显示和隐藏的。当使用 v-...
浅谈vue 锚点指令v-anchor的使用
12-13
如下所示： export default { ... if (binding.value == 0) { total = 0; } else { total = document.getElementById(`anchor-${binding.value}`).offsetTop; } let distance = document.documentEle
【Vue】3. v-if指令
wowpH
09-30 1542
Vue，v-if指令，元素是否偏移，占位，效果，wowpH。
12 Vue3中使用v-if指令实现条件渲染
Python私教
12-19 1276
v-if指令主要用来实现条件渲染，在实际项目中使用得也非常多。v-if通常会配合v-else-if、v-else指令一起使用，可以达到多个条件执行一个，两个条件执行一个，满足一个条件执行等多种场景。下面，我们分别演示这三种使用场景。
Vue3使用v-if指令进行条件渲染
最新发布
brucexia的专栏
03-25 738
在上面的示例中，使用v-if="no"的元素并没有被渲染，使用v-if="ok"的元素正常渲染了。也就是说，当表达式的值为false时，v-if指令不会创建该元素，只有当表达式的值为true时，v-if指令才会真正创建该元素。使用v-else-if和v-else指令时，它们要紧跟在v-if或者v-else-if指令之后。v-else-if指令与v-if指令一起使用，用法与JavaScript中的if…else if类似。在Vue中使用v-if、v-else-if和v-else指令实现条件判断。
vue3中v-if和v-show有什么区别？如何使用
Lzen6719的博客
02-10 246
v-if和v-show的区别
3 methods、v-on、v-if
wgchen
11-25 382
阅读目录场景编写页面的基本结构Vue3的绑定事件和事件方法显示隐藏套餐服务 场景 这篇文章先来完成来宾欢迎语展示的需求。 编写页面的基本结构 在项目根目录，新建一个目录 Demo3.html，然后复制 Demo1.html 里边的代码。 复制后，你可以修改一下<title>，加上青青大宝剑城，然后修改代码，增加 content 变量。具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta ch
Vue3.0基础教程：条件渲染：v-if v-else-if v-if；列表渲染：v-for
qq_45060540的博客
08-24 7254
Vue3.0 学习笔记 4 条件渲染 v-if指令 v-if指令用于动态渲染一块内容，只有当该指令的表达式值为true时才渲染，也可配套使用v-else指令设置一个else-if块和else块 <h1 v-if="ifSee">hello Vue3.0!</h1> <h1 v-else-if="ifSeeMore">hello more Vue3.0!</h1> <h1 v-else>Oh no!</h1> data(){
vue2和vue3的v-if与v-for优先级对比学习
01-18
Vue.js 中使用最多的两个指令就是 v-if 和 v-for ，因此我们可能会想要同时使用它们。虽然官方不建议这样做，但有时确实是必须的，我们来了解下他们的工作方式： 在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-...
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
10-17
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
Vue.js学习记录之在元素与template中使用v-if指令实例
10-19
主要给大家介绍了关于Vue.js学习记录之在元素与template中使用v-if指令的相关资料，文中给出了详细的示例代码供大家参考学习，相信对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
【vue3】07. 跟着官网学习vue3-条件渲染，v-if和v-show
qq_17335549的博客
09-03 1584
跟着官网学习vue3、v-if、v-show的使用和区别、模版中有多个根节点时使用v-show会出现的问题、了解文档片段相关知识
用vue3写二级导航
qq_50951790的博客
03-19 480
模拟的重庆红岩格式和布局 先上效果图 代码如下，图片需要自己导入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
vue2和vue3中v-if和v-for优先级的调整
东逝水
04-13 2755
虽然学不动，但是生命不息，学习还是要继续的。最终还是决定vue3还是要学习起来了。先从官方文档开始，然后就是深入源码了，这都是后话了。 在刷文档时，前面的内容大部分都没变，在读到条件渲染（conditional render）时，我发现有一处跟vue2的不一样，如下图： 第一张图是vue3的，第二张图是vue2的，比较一下发现是调整了v-if和v-for的优先级，vue2是v-for优先级高，现在是v-if的优先级高。我读起来很差异的，我还担心是文档写错了呢。自己就用vue3写了一个简单的测试程序，如下
掌握vue指令之(3)v-if和v-else指令
weixin_43348064的博客
05-19 1438
(3). v-if和v-else: 功能：两个元素二选一显示 语法：<元素1 v-if=“返回bool值的表达式”><元素2 v-else> 注意: v-if和v-else两个元素必须紧挨着，中间不能插入其他元素 v-else后不要加任何=，和程序中if else的else后不加表达式道理一样。 v-show vs v-if 差别 a. v-show通过display:none方式控制显示隐藏，因为不修改DOM树，所以效率略高 b. v-if通过删除元素方式控制显示隐藏，所
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
boxuestudio的博客
02-21 9300
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
Vue内置指令——v-show和v-if指令
热门推荐
zg0601的博客
03-21 4万+
Vue中指令都是带有v-的特殊属性，这些指令主要是用来控制DOM元素的行为，例如最简单的显示、隐藏。本文详细讲解Vue中非常常用的两个条件指令—— v-show 和 v-if 以及它们的区别。
VUE 模板 v-if 判断 数组是否为空
猎人在吃肉
07-09 1万+
vue 判断数组是否为空 为空：array == undefined ||array == null || array.length <= 0 (顺序不能调换) 不为空： array !==undefined &&array != null || && array.length > 0 <ul v-if="commentList == undefined ||commentList == null || commentList.length <=
vue后端传值1和0怎么绑上对应得值?
幺叭伍的博客
10-14 1446
vue后端传值1和0怎么绑上对应得状态值? 目录vue后端传值1和0怎么绑上对应得状态值?前言解决 前言 1 解决
vue3 v-if的使用
11-25
Vue3中v-if指令用于动态渲染一块内容，只有当该指令的表达式值为true时才渲染，也可配套使用v-else指令设置一个else-if块和else块。以下是v-if的使用方法： ```html <template> <div> <h1 v-if="ifSee">hello Vue3.0!</h1> <h1 v-else-if="ifSeeMore">hello more Vue3.0!</h1> <h1 v-else>Oh no!</h1> </div> </template> <script> export default { data() { return { ifSee: true, ifSeeMore: false } } } </script> ``` 在上面的例子中，如果ifSee的值为true，则渲染第一个h1标签，否则如果ifSeeMore的值为true，则渲染第二个h1标签，否则渲染第三个h1标签。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值