<!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. PostgreSQL-UNION与Order by 冲突

    问题描述 union 连接的两个sql 都包含 order SELECT <property1>, <property2> FROM <table1> ORDER ...

  2. k路归并

    public static int[] k_merge(ArrayList<int[]> k_array) { if(CollectionUtils.isEmpty(k_array)){ ...

  3. Vue进行路由跳转的几种方式

    1.<router-link to="需要跳转到页面的路径"> 2.this.$router.push()跳转到指定的url,并在history中添加记录,点击回退返回 ...

  4. shell脚本之删除内容相同的重复文件

    #!/bin/bash #!当前文件夹下,删除内容相同的重复文件,只保留重复文件中的一个. ls -lS --time-style=long-iso | awk 'BEGIN{ getline;get ...

  5. oracle数据库应用总结

    1------->>>>>>>>>>>>>>>>>>>>>>> ...

  6. python_实现员工信息表

    实现员工信息表 文件存储格式如下:id,name,age,phone,job1,Alex,22,13651054608,IT2,Egon,23,13304320533,Tearcher3,nezha, ...

  7. 递归算法几个实例---C/C++

    //1.斐波那契数列 int fibo(int n) { || n==) { ; } else { ) + fibo(n-); } } //2.阶乘 int fac(int n) { || n==) ...

  8. u-boot中bss段的使用

    近日在调试uboot时,发现了一个现象,即在relocate_code前如果给未初始化或者初始化值为0的变量赋值的话,则在relocate_code后程序无法正常执行.经过学习,恶补如下知识 BSS段 ...

  9. 【POJ2152】Fire

    题目大意:给定一棵 N 个节点的无根树,点有点权,边有边权,现需要选出一个点集,满足树上任意一个点到该点集的距离不超过该点的给定值,求选出点集点权的最小值是多少. 题解:可以发现,对于以 i 为根的子 ...

  10. 基于 maven 实现跨平台编译 protobuf 文件

    基于 maven 实现跨平台编译 protobuf 文件 mavne protobuf .proto  跨平台  需求 在团队协作中使用 protobuf 时, 有以下几点需求: protoc 跨平台 ...