本文为博主原创，未经允许不得转载：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

</head>

    <body>

        <div id="app" >

            <!--条件渲染，，用v-if指令会隐藏点dom元素，在浏览器控制台看不到未显示的dom元素-->

            <p v-if="items>10">{{items}}个有现货</p>

            <p v-else-if="items>1">所剩不多了，快点买吧</p>

            <p v-else>没有库存了，请耐心等待</p>

            <!--

                在HTML5中<template></template>标签不占用dom位置，

              不会渲染到dom节点里面，在vue中，经常做条件判断的标签

              -->

            <template v-if="items>50">

                <p> 注意事项</p>

                <p>因为剩余很多，现在买打8折哦！！！</p>

            </template>

            <!--dom元素在浏览器控制台是通过display：none来控制的

                带有 v-show 的元素始终会被渲染并保留在 DOM 中。

                v-show 只是简单地切换元素的 CSS 属性 display。

            -->

            <p v-show="Ninja"> I am hide</p>

            <p v-show="!Ninja"> I am here</p>

            <button v-on:click="Ninja = !Ninja">Ninja skills</button>

        </div>

        <script>

            //vue指令语法 v-指令名字+:+指令的参数=指令的表达式

            var vm = new Vue({

                el:"#app",

                data:{

                    items:52,

                    Ninja:true

                }

            })

        </script>

     </body>

</html>

在浏览器端加载测试的效果如图所示：

Vue学习四：v-if及v-show指令使用方法的更多相关文章

  1. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  2. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  3. 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用

    一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图.    Store     ...

  4. vue 学习四 了解组件

    1组件的注册 全局注册 import Vue from 'vue'; import com from './component1'; Vue.component("com_name" ...

  5. vue学习(四) v-on:事件绑定

    //html <div id="app"> <input type="button" value="ok" v-bind: ...

  6. vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串

    <div id="app"> <p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //s ...

  7. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  8. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

  9. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

随机推荐

  1. html5实现移动端下拉刷新（原理和代码）

    这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新(原理和代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功 ...

  2. 利用iOS中Safari浏览器创建伪Web App

    在safari浏览器里有一个“添加到主屏幕”选项,我们可以用来创建伪Web App,下面来了解一下iOS中Safari的私有属性 第一步设置Web App的主屏幕图标: 有两种属性值apple-tou ...

  3. redis安装集群的2种方式

    redis主从只是数据的备份,当主宕机后不会自动切换从为主,需要手动切换从为主. 哨兵就可以自动切换从为主, 当主数据库遇到异常中断服务后,开发者可以通过手动的方式选择一个从数据库来升格为主数据库,以 ...

  4. Symfony2学习笔记之事件分配器

    ----EventDispatcher组件使用 简介:       面向对象编程已经在确保代码的可扩展性方面走过了很长一段路.它是通过创建一些责任明确的类,让它们之间变得更加灵活,开发者可以通过继承这 ...

  5. C#发送邮件异常：根据验证过程,远程证书无效，何解？？？

    /// <summary> /// 发送邮件 /// </summary> /// <param name="mailSubjct">邮件主题& ...

  6. Centos7 在apache+php7环境下 安装 Discuz!X3.4

    拉取Discuz!X3.4代码 git 地址 : https://gitee.com/ComsenzDiscuz/DiscuzX 在/var/www/html 中新建 bbs 文件夹 将git下upl ...

  7. IP代理（proxies参数）

    在爬虫的过程中,我们经常会遇见很多网站采取了防爬取技术,或者说因为自己采集网站信息的强度和采集速度太大,给对方服务器带去了太多的压力. 如果你一直用同一个代理ip爬取这个网页,很有可能ip会被禁止访问 ...

  8. javax.servlet.ServletException: Servlet.init() for servlet springmvc threw exception

    type Exception report message Servlet.init() for servlet springmvc threw exception description The s ...

  9. DDoS防御方案

    转自:http://netsecurity.51cto.com/art/201211/368930.htm 深入浅出DDoS攻击防御应对篇:DDoS防御方案 谈到DDoS防御,首先就是要知道到底遭受了 ...

  10. 01：adminLTE2基本使用

    1.1 adminLTE介绍 1.adminLTE 介绍 1.基于Bootstrap3高度可定制的响应式管理模板,免去前端架构师大量的js和css的编写 2.adminLTE除了可以使用bootstr ...