1、v-if v-else-if v-else

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>vue示例</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <div id="app">
  11.             <p v-if="status === 1">当status为1时显示本行</p>
  12.             <p v-else-if="status === 2">当status为2时显示本行</p>
  13.             <p v-else>否则显示本行</p>
  14.         </div>
  15.         <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
  16.         <script type="text/javascript">
  17.             new Vue({
  18.                 el: '#app',
  19.                 data: {
  20.                     status:1
  21.                 }
  22.             });
  23.         </script>
  24.     </body>
  25.  
  26. </html>

一次处理多个元素，使用template + v-if

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>vue示例</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <div id="app">
  11.             <template v-if="status === 1">
  12.                 <p>一段文本</p>
  13.                 <p>一段文本</p>
  14.                 <p>一段文本</p>
  15.             </template>
  16.         </div>
  17.         <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
  18.         <script type="text/javascript">
  19.             new Vue({
  20.                 el: '#app',
  21.                 data: {
  22.                     status: 1
  23.                 }
  24.             });
  25.         </script>
  26.     </body>
  27.  
  28. </html>

2、v-show

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>vue示例</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <div id="app">
  11.             <p v-show="status">一段文本</p>
  12.         </div>
  13.         <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
  14.         <script type="text/javascript">
  15.             new Vue({
  16.                 el: '#app',
  17.                 data: {
  18.                     status: false
  19.                 }
  20.             });
  21.         </script>
  22.     </body>
  23.  
  24. </html>

v-show控制的是display，同时不能在template上使用。

v-if与v-show的使用建议：

v-if适合条件不经常改变的场景，因为它的切换开销大。

v-show适用于频繁切换的场景

3、v-for

v-for可以使用template，对多个元素进行渲染。

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>vue示例</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <div id="app">
  11.             <ul>
  12.                 <template v-for="book in books">
  13.                     <li>书名：{{book.name}}</li>
  14.                     <li>作者：{{book.author}}</li>
  15.                 </template>
  16.             </ul>
  17.         </div>
  18.         <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
  19.         <script type="text/javascript">
  20.             new Vue({
  21.                 el: '#app',
  22.                 data: {
  23.                     books: [{
  24.                             name: 'vuejs',
  25.                             author: 'a'
  26.                         },
  27.                         {
  28.                             name: 'js高级',
  29.                             author: 'b'
  30.                         },
  31.                         {
  32.                             name: 'java',
  33.                             author: 'c'
  34.                         }
  35.                     ]
  36.                 }
  37.             });
  38.         </script>
  39.     </body>
  40.  
  41. </html>
  1. v-for="book in books" 也可以是使用of代替in，of更接近js语法。

VUE 内置指令的更多相关文章

  1. Vue 内置指令 && 自定义指令

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  2. vue内置指令详解——小白速会

    指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bi ...

  3. vue内置指令与自定义指令

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  4. 2.0 vue内置指令与自定义指令

    1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...

  5. Vue内置指令

    v-text 类型: string用法: 更新元素的 textContent.如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值. v-html 类型: stri ...

  6. vue_简介_渐进式 js 框架_内置指令_自定义指令_自定义插件

    vue 尤雨溪 华裔 Google 工程师 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合 移动 / PC 端 开发 动态构建用户界面: 异步获取后台数据,展现到页面 渐进式 js 框架 渐 ...

  7. Vue源码后记-其余内置指令（2）

    -- 指令这个讲起来还有点复杂,先把html弄上来: <body> <div id='app'> <div v-if="vIfIter" v-bind ...

  8. Vue源码后记-其余内置指令（1）

    把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind ...

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

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

随机推荐

  1. js数组，在遍历中删除元素

    /** * 有效的方式 - 改变下标,控制遍历 */ for (var i = 0; i < arr.length; i++) { if (...) { arr.splice(i, 1); // ...

  2. go chapter 6 - map array

    遍历 for i,v := range *arr { // 遍历数组,第一个参数为index, 第二个参数为元素 fmt.Println("---------------") fm ...

  3. 倍增LCA学习笔记

    前言 ​ "倍增",作为一种二进制拆分思想,广泛用于各中算法,如\(ST\)表,求解\(LCA\)等等...今天,我们仅讨论用该思想来求解树上两个节点的\(LCA\)(最近公共祖先 ...

  4. 用Pandas获取商品期货价格并可视化

     用Pandas获取商品期货价格并可视化 摘  要 1.用pandas从excel中读取数据: 2.用pandas进行数据清洗.整理: 3.用bokeh进行简单的可视化. 1.数据读取 本文主要是将获 ...

  5. 关于使用jqmobi前端框架在phonegap平台上开发时的日期时间选择控件

    jqmobi(appframework)作为Intel的一款html5移动前端框架,以其自身轻量级和容易上手获得了很多移动HTML5开发者的喜爱,相对于jquerymobile,它可以说将jQuery ...

  6. 【图论】Network of Schools

    [POJ1236]Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 18969   Acc ...

  7. [AGC026B]rng_10s

    题意:一个商店,第一天早上有$A$罐苹果汁,一个人每天上午都会来买$B$罐,每天晚上如果剩余罐数$\leq C$那么会增加$D$罐,问能否无限买 收集一个套路...? 首先如果$B\gt A$或者$B ...

  8. 【搜索】【剪枝】bzoj1306 [CQOI2009]match循环赛

    dfs+剪枝*4(通过得很勉强): 1.只枚举一半的比赛,另一半直接得出. 2.处理前缀和,若大于目标得分则剪枝 3.前缀和加上若接下来全胜的得分 仍小于 目标得分,则剪枝. 4.枚举到每个人的最后一 ...

  9. java instanceof方法

    基本用法 null instanceof Object   为false: null instanceof 任意类 为false:任意实例 instanceof 对应的类或者父类 都为true: 基本 ...

  10. Problem A: 零起点学算法91——找出一个数组中出现次数最多的那个元素

    #include<stdio.h> int main() { ],b[]={}; while(scanf("%d",&n)!=EOF) { ;i<n;i+ ...