vue12-v-if与v-show

川长思鸟来 2022-05-10 00:50 84阅读 0赞

首先看下面代码:

<!DOCTYPE html>
    <html lang=en>
        <head>
            <meta charset="utf-8"/>
            <title>Hello world</title>
            <script src="vue.js"></script>
        </head>
        <body>
            <div id="root">
                
                <div v-if="show" title="v-if">{
       {message}}</div>
    
                
                <div v-show="show" title="v-show">{
       {message}}</div>
            </div>
    
    
            <script>
                var vm = new Vue({
                   el:"#root",
                   data:{
                       show:true,
                       message:'hello world'
                   }
                })
    
            </script>
        </body>
    </html>

如果vue实例中show的值为false,页面都不会呈现内容，但是v-if标签根本就不会再dom上，而v-show隐藏了标签。

![70][]

v-else-if用法：

<!DOCTYPE html>
    <html lang=en>
        <head>
            <meta charset="utf-8"/>
            <title>Hello world</title>
            <script src="vue.js"></script>
        </head>
        <body>
            <div id="root">
                <div v-if="str==='a'" title="v-if">{
       {message+' a'}}</div>
                <div v-else-if="str==='b'" title="v-if">{
       {message+' b'}}</div>
                <div v-else>good bye</div>
            </div>
    
    
            <script>
                var vm = new Vue({
                   el:"#root",
                   data:{
                       show:false,
                       message:'hello world',
                       str:'a'
                   }
                })
    
            </script>
        </body>
    </html>

[70]: /images/20220510/a116f9adc8784f68aa495b4bea01715a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，84人围观）

还没有评论，来说两句吧...

相关阅读

相关（12）vue引用echarts

一、引用步骤： 1、先引入echarts库：如果用的页面比较多，可以在main.js中全局引入echarts库；如果用的页面不多，可以单独引入。这里采用全局引入：

布满荆棘的人生/ 2023年07月20日 12:15/ 0 赞/ 8 阅读

相关 Electron 12 学习（二）Electron 12 安装与配置

1. 设置 electron 镜像： npm config set ELECTRON_MIRROR https://npm.taobao.org/m

野性酷女/ 2022年10月14日 05:25/ 0 赞/ 475 阅读

相关 VIF检验相关性

`VIF`可以用来度量多重共线性问题， V I F j = 1 1 − R j 2 \\quad \\mathrm\{VIF\}\_\{j\}=\\frac\{1\}\{1-R

冷不防/ 2022年09月12日 02:55/ 0 赞/ 214 阅读

相关 12.表单与验证

学习要点： 1、Header()函数 2、接收及验证数据表单作用：用于验证 1、Header()函数标头header是服务器以HTTP协议传html资料

蔚落/ 2022年07月14日 09:25/ 0 赞/ 86 阅读

相关 vue12-v-if与v-show

首先看下面代码: <!DOCTYPE html> <html lang=en> <head> <meta charse

川长思鸟来/ 2022年05月10日 00:50/ 0 赞/ 85 阅读

相关 Vue 框架-12-Vue 项目的详细开发流程

Vue 框架-12-Vue 项目的详细开发流程首先，如果你还不了解 Vue 脚手架怎么搭建？默认的环境中有哪些文件？文件大概是什么作用？那么，您要先查

叁歲伎倆/ 2022年04月16日 04:20/ 0 赞/ 316 阅读

相关 vue-router—12全局钩子函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9q

你的名字/ 2022年01月16日 01:25/ 0 赞/ 181 阅读

相关 vue(12)ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

柔情只为你懂/ 2022年01月11日 08:05/ 0 赞/ 107 阅读

相关 Vue教程12(实例生命周期介绍)

通过前面的介绍我们知道使用Vue的时候我们都必须创建一个Vue实例对象，如下 var vm = new Vue({ ...}) 那么这个Vue实例的生命周期是怎

谁借莪１个温暖的怀抱￠/ 2021年12月03日 14:23/ 0 赞/ 175 阅读

相关 NV12与YV12，YUV的主要格式

YUV是编译true-color颜色空间（color space）的种类，Y'UV, YUV, YCbCr，YPbPr等专有名词都可以称为YUV，彼此有重叠。“Y”

Love The Way You Lie/ 2021年09月10日 09:08/ 0 赞/ 1407 阅读