<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="app">

                <h1 v-show="ok">Hello!</h1>  //条件为TRUE，输出

                <h1 v-show="error">false!</h1>  //条件为false，不输出

                <h1 v-show="10>5">10大于5，输出!</h1>   //条件为TRUE，输出

                <h1 v-show="2>10">不大于10，不输出!</h1>   //条件为false，不输出

        </div>

    </body>

    <script>

        new Vue({

            el: '#app',

            data: {

                ok: true,

                error: false

            }

        })

    </script>

</html>

截图：

Vue 中 使用v-show的更多相关文章

  1. vue中的vue-cli

    在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...

  2. Vue学习笔记七：Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  3. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  4. vue中的filters的用法

    1.效果 金额保留两位小数,并加上单位元 2.index.html <!DOCTYPE html> <html lang="en"> <head> ...

  5. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  6. vue中$watch源码阅读笔记

    项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...

  7. 025——VUE中事件的基本使用与VUE中差异

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 024——VUE中filter的使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 023——VUE中数据排序sort() / 数据反转 reverse() 的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 022——VUE中remove()方法的使用：

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Quatrz + Spring

    实例工程结构: 配置: pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...

  2. Python 安装cx_Oracle模块折腾笔记

    kali linux/ubuntu下安装: 不得不说安装这个模块很蛋疼,决定做个记录. sudo apt install build-essential unzip python-dev libaio ...

  3. [转载]【转】乘法器的Verilog HDL实现

      乘法器如果直接用*来实现的话,会消耗很多的资源.所以有了串行和并行两种实现思路.用串行的话,8位一般会有8位以上的延迟,但是消耗的资源是最少的.低速数据处理比较适合.并行也就是流水线方法,以时间换 ...

  4. xrdp远程

    安装图形界面 yum groupinstall "GNOME Desktop" 安装epel源 yum install epel* 安装xrdp yum --enablerepo= ...

  5. spring之bean的自动扫描

    首先看一段applicationContext.xml中的自动扫描配置 <context:component-scan base-package="org.java.test" ...

  6. 解释c# Peek 方法

    peek是用来确定你read的文件是否结束了,如果结束了会返回int型 -1 , 举个例子,你可以在输出每一行之前检查一下文件是否结尾,如果没结束就输出此行. StreamReader sr = ne ...

  7. webview默认是不开启localstorage的

    .setDomStorageEnabled(true);// 打开本地缓存提供JS调用,至关重要 转载 https://blog.csdn.net/xhf_123/article/details/77 ...

  8. python 后台 安装 富文本编辑

    前言 当然需要安装一些后台只能输入一些文本编辑器,不然这样多少不美观呀 当然python 有 safe 可以把后台的标签转换 , 还有 striptags   这个是换成html 格式的,但不会加粗或 ...

  9. centos安装gitlab成果

    centos安装gitlab成果 开始之前 在开始之前请先查看官方的刚需文档: https://github.com/gitlabhq/gitlabhq/blob/master/doc/install ...

  10. C++为什么不可以把一个数组直接赋值给另一个数组

    今天好奇一个问题, int a[3] = {1,2,3]; int b[3]; b=a; 编译器报错, 网上找了一圈, 大概明白: C++就是如此设定的, 数组不能直接赋值, 可以使用std::cop ...