VUE 内置指令
1、v-if v-else-if v-else
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<p v-if="status === 1">当status为1时显示本行</p>
<p v-else-if="status === 2">当status为2时显示本行</p>
<p v-else>否则显示本行</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
status:1
}
});
</script>
</body> </html>
一次处理多个元素，使用template + v-if
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<template v-if="status === 1">
<p>一段文本</p>
<p>一段文本</p>
<p>一段文本</p>
</template>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
status: 1
}
});
</script>
</body> </html>
2、v-show
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<p v-show="status">一段文本</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
status: false
}
});
</script>
</body> </html>
v-show控制的是display，同时不能在template上使用。
v-if与v-show的使用建议：
v-if适合条件不经常改变的场景，因为它的切换开销大。
v-show适用于频繁切换的场景
3、v-for
v-for可以使用template，对多个元素进行渲染。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<ul>
<template v-for="book in books">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js高级',
author: 'b'
},
{
name: 'java',
author: 'c'
}
]
}
});
</script>
</body> </html>
v-for="book in books" 也可以是使用of代替in，of更接近js语法。
VUE 内置指令的更多相关文章
- Vue 内置指令 && 自定义指令
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- vue内置指令详解——小白速会
指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bi ...
- vue内置指令与自定义指令
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- 2.0 vue内置指令与自定义指令
1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...
- Vue内置指令
v-text 类型: string用法: 更新元素的 textContent.如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值. v-html 类型: stri ...
- vue_简介_渐进式 js 框架_内置指令_自定义指令_自定义插件
vue 尤雨溪 华裔 Google 工程师 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合 移动 / PC 端 开发 动态构建用户界面: 异步获取后台数据,展现到页面 渐进式 js 框架 渐 ...
- Vue源码后记-其余内置指令（2）
-- 指令这个讲起来还有点复杂,先把html弄上来: <body> <div id='app'> <div v-if="vIfIter" v-bind ...
- Vue源码后记-其余内置指令（1）
把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind ...
- Vue.js 学习笔记 第5章 内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...
随机推荐
- 并发系列3-大白话聊聊Java并发面试问题之谈谈你对AQS的理解？【石杉的架构笔记】
- 洛谷P4609 [FJOI2016]建筑师（第一类斯特林数+组合数）
题面 洛谷 题解 (图片来源于网络,侵删) 以最高的柱子\(n\)为分界线,我们将左边的一个柱子和它右边的省略号看作一个圆排列,右边的一个柱子和它左边的省略号看作一个圆排列,于是,除了中间的最高的柱子 ...
- Pandas分组运算（groupby）修炼
Pandas分组运算(groupby)修炼 Pandas的groupby()功能很强大,用好了可以方便的解决很多问题,在数据处理以及日常工作中经常能施展拳脚. 今天,我们一起来领略下groupby() ...
- matlab学习之求解函数的根和极小值
只是用来求解函数的部分一个根,具体算法没查询,只是调用自带的函数 代码如下 % 求函数零点和极小值 xiszero=func(0) x=-1:0.1:1.5; y=func(x); plot(x,y) ...
- [HDU1542]Atlantis(扫描线+线段树)
Atlantis Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- Java源代码编译过程
编译其本质是将一种语言规范转换成另一种语言规范,即将Java语言规范转换为JVM虚拟机语言规范.结果就是.java文件到.class文件. 对于C/C++编译直接将高级语言转换为机器语言,Java ...
- TCP连接 断开
参考:http://blog.csdn.net/cyberhero/article/details/5827181 1.建立连接协议 (三次握手) (1)客户端发送一个带SYN标志的TCP ...
- VC知识库
VC知识库http://www.vckbase.com/index.php/code
- JavaScript 巧学巧用
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来, ...
- OpenLayers2中的事件_以Popup为例
SATURDAY, 21 MARCH 1-Preface 前几天阅读学习了OpenLayers'Cookbook中的第四章——Working with events. 从AFDS系统的开发项目进行至今 ...