hualinux 进阶 vue 1.8：vue命令（四）条件判断v-if命令

最新推荐文章于 2023-09-16 17:59:12 发布

hualinux

最新推荐文章于 2023-09-16 17:59:12 发布

阅读量213

点赞数

分类专栏：进阶篇3 vue.js专业前端入门文章标签： hualinux vue vue v-if vue条件判断

本文链接：https://blog.csdn.net/hualinux/article/details/115466314

版权

进阶篇3 vue.js专业前端入门专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一、v-if用法

二、例子

这些讲vue的条件判断命令v-if，还有 v-else 、v-else-if可以自己看一下

一、v-if用法

v-if条件可以看Vue中的v-if

预期：any
用法：

根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程

参考：条件渲染 - v-if

二、例子

需求：点击显示再点一下隐藏某个内容，主要代码如下：（<script>引入vue.js文件我这里不再说了）

<body>
    <div id="root">
       <div v-if="show">这是隐藏的内容</div>
        <button v-on:click="t1">点我试下</button>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                show: false
            },
            methods: {
                t1: function (){
                    this.show= !this.show
                }
            }
        })
    </script>
</body>

效果：

点上面的按钮试下，发现在html中插入了一行<div>标签，

再点一次发现会发现标签被销毁。如果多的话会影响性能。建议用v-show命令，下章讲

hualinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hualinux 进阶 vue 1.8：vue命令（四）条件判断v-if命令

目录一、v-if用法二、例子这些讲vue的条件判断命令v-if，还有v-else 、v-else-if可以自己看一下一、v-if用法v-if条件可以看Vue中的v-if预期：any 用法：根据表达式的值的truthiness来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是<template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。当和v-if一起使用时，v-for的优先级比v-if更高...
复制链接

扫一扫

专栏目录