Vue学习四:v-if及v-show指令使用方法
本文为博主原创,未经允许不得转载:
<!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指令使用方法的更多相关文章
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
- 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用
一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图. Store ...
- vue 学习四 了解组件
1组件的注册 全局注册 import Vue from 'vue'; import com from './component1'; Vue.component("com_name" ...
- vue学习(四) v-on:事件绑定
//html <div id="app"> <input type="button" value="ok" v-bind: ...
- vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串
<div id="app"> <p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //s ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue.js 学习笔记 第5章 内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
随机推荐
- 【2017-03-02】C#集合,结构体,枚举
集合 集合与数组的区别 数组:同一类型,固定长度 集合:不同类型,不固定长度 使用集合前需要: 引用命名空间:using System.Collections; 1.普通集合 定义: Arra ...
- 编程中的链式调用:Scala示例
编程中的链式调用与Linux Shell 中的管道类似.Linux Shell 中的管道 ,会将管道连接的上一个程序的结果, 传递给管道连接的下一个程序作为参数进行处理,依次串联起N个实用程序形成流水 ...
- Java注解的原理
自Java5.0版本引入注解之后,它就成为了Java平台中非常重要的一部分.开发过程中,我们也时常在应用代码中会看到诸如@Override,@Deprecated这样的注解.这篇文章中,我将向大家讲述 ...
- Xfire基础
XFire 是与Axis 2并列的新一代Web Service框架,通过提供简单的API支持Web Service各项标准协议,能够快速地开发Web Service应用.和其他Web服务引擎相比,XF ...
- Hive复制分区表和数据
1. 非分区表: 复制表结构: create table new_table as select * from exists_table where 1=0; 复制表结构和数据: create tab ...
- python shutil模块简单介绍
python shutil模块简单介绍 简介 shutil模块提供了大量的文件的高级操作.特别针对文件拷贝和删除,主要功能为目录和文件操作以及压缩操作. shutil 模块方法: copy(src, ...
- 自学Java第三个星期的总结
在这一周里我在网上学习了java的分支结构.Number&Matht类.Character类.string类.String Buffer和String Builder类以及数组和日期时间等有关 ...
- 从实践出发:微服务布道师告诉你Spring Cloud与Spring Boot他如何选择
背景 随着公司业务量的飞速发展,平台面临的挑战已经远远大于业务,需求量不断增加,技术人员数量增加,面临的复杂度也大大增加.在这个背景下,平台的技术架构也完成了从传统的单体应用到微服务化的演进. 系统架 ...
- Tomcat启动程序端口冲突、确认相应进程及杀死冲突进程的解决方案
一. 查看所有进程占用的端口 在开始-运行-cmd,输入:netstat –ano可以查看所有进程 二.查看占用指定端口的程序(1)命令窗口输出 命令:netstat –ano | findstr & ...
- PHP5.4以下的json_encode中文被转码的问题
PHP的json_encode中文被转码的问题 在php5.2中做json_encode的时候.中文会被unicode编码, php5.3加入了options参数, 5.4以后才加入JSON_UN ...