VUE框架使用v-show和template标签的开发应用效果------VUE框架

已于 2023-11-30 12:33:33 修改
阅读量1k 收藏 23
点赞数 22
分类专栏： # VUE框架 前端 文章标签： vue.js javascript ecmascript 前端 前端框架 vue js
于 2023-11-29 15:36:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134691566
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 这是压根就没有渲染,不是css隐藏 -->
        <button @click="addValue()">按下修改图片</button>
        <h1>{{value}}</h1>
        <img v-if="value % 2 === 0" height="100px" src="../Pic/1.png">
        <!-- 为了提高效率,可以使用v-else -->
        <!-- <img v-if="value % 2 != 0" height="100px" src="../Pic/2.png"> -->
        <!-- 这样效率高的多,不用再次运算一遍了 -->
        <img v-else height="100px" src="../Pic/2.png">
        <br>
        <input type="number" v-model="temp"/>
        <h1>{{warn}}</h1>
        <br>
        <h1 v-if="temp <= 10">寒冷</h1>
        <h1 v-if="temp > 10 && temp <= 25">凉爽</h1>
        <h1 v-if="temp > 25">炎热</h1>
        <!-- 简写方法,但是这样写,中间不能断开 -->
        <h1 v-if="temp <= 10">寒冷</h1>
        <h1 v-else-if="temp <= 25">凉爽</h1>
        <h1 v-else>炎热</h1>
        <!-- v-show指令是通过css样式的display属性来实现显示和隐藏的 -->
        <!-- v-if是直接不渲染 -->
        <!-- 如果一个元素频繁的要进行显示隐藏之间的修改,就用v-show -->
        <!-- 因为v-if要重新渲染出来 -->
        <!-- v-if的优点是,页面加载速度快,提高了渲染效率 -->
        <div v-show="true">你可以看到我吗?</div>
        <!-- 使用template而不是div就可以做到既把这三个子元素包裹 -->
        <!-- 又不破坏原有页面结构的效果 -->
        <!-- template元素只是起到占位的作用,不会真正出现在页面上也不会影响页面的结构 -->
        <template v-if="value === 10">
            <input type="text"/>
            <input type="checkbox"/>
            <input type="radio"/>
        </template>
        
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                value : 1,
                temp : 0,
                warn : ""
            },
            methods : {
                addValue()
                {
                    this.value++;
                }
            },
            watch : {
                temp : {
                    immediate : true,
                    deep : true,
                    handler(newValue,oldValue)
                    {
                        if(newValue <= 10)
                        {
                            this.warn = "寒冷";
                        }
                        else if(newValue <= 25 && newValue > 10)
                        {
                            this.warn = "凉爽";
                        }
                        else if(newValue > 25)
                        {
                            this.warn = "炎热";
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <h1>{{msg}}</h1>

        <!-- 这是压根就没有渲染,不是css隐藏 -->

        <button @click="addValue()">按下修改图片</button>

        <h1>{{value}}</h1>

        <img v-if="value % 2 === 0" height="100px" src="../Pic/1.png">

        <!-- 为了提高效率,可以使用v-else -->

        <!-- <img v-if="value % 2 != 0" height="100px" src="../Pic/2.png"> -->

        <!-- 这样效率高的多,不用再次运算一遍了 -->

        <img v-else height="100px" src="../Pic/2.png">

        <br>

        <input type="number" v-model="temp"/>

        <h1>{{warn}}</h1>

        <br>

        <h1 v-if="temp <= 10">寒冷</h1>

        <h1 v-if="temp > 10 && temp <= 25">凉爽</h1>

        <h1 v-if="temp > 25">炎热</h1>

        <!-- 简写方法,但是这样写,中间不能断开 -->

        <h1 v-if="temp <= 10">寒冷</h1>

        <h1 v-else-if="temp <= 25">凉爽</h1>

        <h1 v-else>炎热</h1>

        <!-- v-show指令是通过css样式的display属性来实现显示和隐藏的 -->

        <!-- v-if是直接不渲染 -->

        <!-- 如果一个元素频繁的要进行显示隐藏之间的修改,就用v-show -->

        <!-- 因为v-if要重新渲染出来 -->

        <!-- v-if的优点是,页面加载速度快,提高了渲染效率 -->

        <div v-show="true">你可以看到我吗?</div>

        <!-- 使用template而不是div就可以做到既把这三个子元素包裹 -->

        <!-- 又不破坏原有页面结构的效果 -->

        <!-- template元素只是起到占位的作用,不会真正出现在页面上也不会影响页面的结构 -->

        <template v-if="value === 10">

            <input type="text"/>

            <input type="checkbox"/>

            <input type="radio"/>

        </template>

       

    </div>

    <script>

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello",

                value : 1,

                temp : 0,

                warn : ""

            },

            methods : {

                addValue()

                {

                    this.value++;

                }

            },

            watch : {

                temp : {

                    immediate : true,

                    deep : true,

                    handler(newValue,oldValue)

                    {

                        if(newValue <= 10)

                        {

                            this.warn = "寒冷";

                        }

                        else if(newValue <= 25 && newValue > 10)

                        {

                            this.warn = "凉爽";

                        }

                        else if(newValue > 25)

                        {

                            this.warn = "炎热";

                        }

                    }

                }

            }

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 22
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 中 template 标签为什么不可以使用 v-show？
lin2785的博客
04-12 809
因为 v-show 是通过 display 来控制标签进行渲染的，但是 template 标签在 vue 解析后是不会显示在页面上的 ，是虚拟 Dom，所以无法使用 v-show，但是 v-if 是可以使用在 template 标签上，因为 v-if 是条件渲染，只要满足 v-if 后的条件就可以完成渲染。
vue v-if与v-show的区别，template的使用
qq_42453562的博客
01-13 5305
条件渲染 ： v-if 与 v-else-if 与 v-else 控制元素的显示与隐藏 示例：动态显示 效果： 代码： 注意：v-if与v-else语句需要联合使用，如中间加了其他语句如P标签使上下不连贯儿将导致报错！！但是v-if仍可以使用 同理，v-if与v-else中间可以使用v-else-if 2：template 两个即两个以上的div需要同一个元素控制的时候，用temp...
VUE3与Uniapp 五 （v-if、v-show和template、v-for的使用）
最新发布
weixin_41703489的博客
04-28 629
【代码】VUE3与Uniapp 四 （v-if、v-show和template的使用）
【Vue】基础系列（十一）条件渲染-—v-if，v-show,v-else,template语法详解
阿牛哥的博客
03-09 2714
【Vue】基础系列（十一）条件渲染-—v-if，v-show,v-else,template语法详解
template不支持v-show
公z号：职场爱学习
06-21 6761
template元素不支持v-show指令，即v-show="false"对template元素来说不起作用。但是此时的template元素支持v-if、v-else-if、v-else、v-for这些指令。 //vue中template的三种写法，目前常见的是第三种 //第一种（使用模板字符串）早期字符串拼接年代 new Vue({ el: “#app”, template: ’ {{message}} ', data: { message: ‘字符串拼接’ } }) //第二种（使用script元素）
Vue template 标签不可以使用 v-show/v-for
WangYan的博客
07-15 3904
因为v-show是通过display来控制标签进行渲染的，但是template标签在vue解析后是不会显示在页面上的，是虚拟Dom，所以无法使用v-show。但是v-if是可以使用在template标签上，因为v-if是条件渲染，只要满足v-if后的条件就可以完成渲染。......
vue v-show和v-if在template中的使用
早晚的博客
05-31 1047
1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）； 2. v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多； 3. v-if 有更高的切换开销，v-show 切换开销小； 4. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有 ...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是因为 `el-tab-pane` 的渲染机制导致的。 `v-show` 和 `v-if` 都是 Vue 中的条件渲染...
vue 翻页组件vue-flip-page效果
10-15
Vue Flip Page是一个用于创建翻页效果的组件，适用于Vue.js框架。这个组件允许开发者实现类似纸质书籍的翻页效果，为用户带来更加直观和交互性强的体验。在本文中，我们将深入探讨Vue Flip Page的基本使用、核心功能...
对vue中v-if的常见使用方法详解
10-17
Vue的`v-if`和`v-else`可以与`<template>`结合，使得条件渲染更灵活。如代码所示，`<template v-if>`和`<template v-else>`分别用于显示不同的登录视图，基于`loginType`的值。 4. **条件切换** 通过改变数据绑定...
Vue v-model组件封装(类似弹窗组件)
10-15
Vue.js 是一个流行的前端框架，它提供了一种优雅的方式来构建用户界面。`v-model` 是 Vue 中的一个核心特性，主要用于双向数据绑定，通常用于表单元素如 input、textarea 等。然而，Vue 也允许开发者将 `v-model` ...
VUE解决 v-html不能触发点击事件的问题
10-16
在Vue.js开发过程中，有时候会遇到一个问题，即使用`v-html`指令插入动态HTML内容时，这些内容中的事件监听器（如点击事件）无法正常触发。这是因为Vue.js的模板编译机制不处理`v-html`插入的纯HTML字符串，它们被视...
VUE2.0 学习（八）条件渲染v-show，v-if，template标签
一天不写代码难受的博客
10-13 587
目录需求方法 `属性v-show`v-show动态设置值v-if对比v-else-ifv-elsetemplate标签总结 需求 根据一定的条件，让页面上面的某一个区域div进行展示，或者不展示 方法 属性v-show 就是进行判断，vue里面有一个指令v-show，他为true，那么对应的标签就会展示，为false，就不展示 v-show的值还可以是表达式，只要表达式的返回值是Boolean值就可以 v-show动态设置值 v-if 他的值也是true或者false 对比 切换频率高的用v-sho
Vue中v-if和v-show的方法总结
Aiyining的博客
12-27 669
Vue中v-if和v-show的方法总结 v-if是条件渲染，当条件为false时，元素将不会被编译。 v-show只是简单的CSS属性切换，当v-show条件为false时，讲给元素添加display：none的CSS属性，但是无论条件是否为真，这个DOM元素都会被编译。 特别注意 v-show不能在&lt;template&gt;中使用，而且v-show并不能配合v-else使用。 ...
coderwhy前端课程笔记|vue基础教程|-2template元素,v-show,v-if列表渲染，数组更新检测，虚拟dom,VNode,diff算法，key,插入f
VAN
04-13 18
因为v-if是一个指令，所以必须将其添加到一个元素上：但是如果我们希望切换的是多个元素呢？此时我们渲染div，但是我们并不希望div这种元素被渲染；这个时候，我们可以选择使用template；template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来：有点类似于小程序中的block，template最后不会渲染到页面上的。
Vue教学7（条件渲染v-show，v-if，v-else-if，v-else，v-if与template配合）
HJERSON的博客
03-06 428
【代码】Vue教学7（条件渲染v-show，v-if，v-else-if，v-else，v-if与template配合）
Vue 的v-if与v-show
热门推荐
sunhy007的博客
07-04 1万+
在Vue的内部指令中，v-show与v-if的区别，总结如下： 在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。 v-if 根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了
Vue基础
m0_68879220的博客
05-04 509
Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和HTML解析器解析。 一，插值的几种方式 1，文本插值，使用双大括号{{}} js代码： var vm = new Vue({ el:"#app", data:{ ...
v-if和v-show的学习。template标签
weixin_54568872的博客
11-13 54
当v-if中的条件成立，则该条语句将会被页面加载渲染。
vue3使用v-show
09-17
在Vue3中，使用v-show指令可以根据表达式的真假值来显示或隐藏元素。如果表达式的值为真，元素将显示；如果表达式的值为假，元素将隐藏。 下面是一个示例： ``` <template> <button @click="toggleShow">Toggle ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值