本文为博主原创,未经允许不得转载:

<!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. Linux 软件安装卸载命令

    安装方式一: RPM 命令 rpm -qa|grep java  查看java 是否安装 rpm -e --nodeps  软件名   卸载已安装软件 rpm -ivh xxx.rpm   安装 安装 ...

  2. linux lsof用法

    linux lsof命令详解   简介 lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可 ...

  3. webpack4.0 实战记录

    从零配置webpack4.0 搭建React工程. 基本环境:Node(v8.1.2)+ webpack(v4.16.2) 1.在项目目录 命令窗口  执行  npm init 初始化项目,执行完后项 ...

  4. LIS最长上升子序列三种方法 (模板)

    O(n^)的方法: #include <iostream> #include <stdio.h> #include <cstring> #include <a ...

  5. Python+OpenCV图像处理(六)—— ROI与泛洪填充

    一.ROI ROI(region of interest),感兴趣区域.机器视觉.图像处理中,从被处理的图像以方框.圆.椭圆.不规则多边形等方式勾勒出需要处理的区域,称为感兴趣区域,ROI. 代码如下 ...

  6. Ubuntu16.04+cuda8.0rc+opencv3.1.0+caffe+Theano+torch7搭建教程

    https://blog.csdn.net/jywowaa/article/details/52263711 学习中用到深度学习的框架,需要搭建caffe.theano和torch框架.经过一个月的不 ...

  7. URL的解析,C语言实现

    源: URL的解析,C语言实现 c语言实现urlencode和decode

  8. MySQL日志详细说明

    这片博文我们会详细说明MySQL本身的日志,不包含重做日志和undo日志(这两个日志是innodb存储引擎的日志). MySQL本身的日志有以下几种(MySQL5.7版本): 错误日志 慢查询日志 通 ...

  9. P5241 序列(滚动数组+前缀和优化dp)

    P5241 序列 挺神仙的一题 看看除了dp好像没什么其他办法了 想着怎么构个具体的图出来,然鹅不太现实. 于是我们想办法用几个参数来表示dp数组 加了几条边肯定要的吧,于是加个参数$i$表示已加了$ ...

  10. P2044 [NOI2012]随机数生成器

    洛咕原题 正常的矩乘题. 但是,计算过程中会爆long long. 所以,我们要用快速(龟速)乘来解决. 快速乘,也就是把快速幂稍作修改.乘法被分成若干个加法,以时间为代价解决精度问题. #inclu ...