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 内置指令的更多相关文章

  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. LAMP搭建Discuz论坛

    搭建Discuz论坛 1.  准备LAMP环境 LAMP是Linux,Apache,MySql和PHP的缩写,是Discuz论坛系统依赖的基础运行环境 1.安装Apache2 Ubuntu需要安装Ap ...

  2. 数据库SQL归纳（一）

    SQL功能分类 SQL 功能 动 词 数据定义 DDL CREATE.ALTER.DROP 数据查询 DQL SELECT 数据更改 DML INSERT.UPDATE.DELETE 数据控制 DCL ...

  3. [Luogu2540][NOIP2016]斗地主增强版(搜索+DP)

    增强版就是原版中两鬼不算对子的版本. 先爆搜出完所有对子,剩下的牌DP处理. 考虑每个数码的拆牌情况,最多可能被拆成5种情况:1+1+1+1,1+1+2,1+3,2+2,4.故DP状态数最多为5^13 ...

  4. bzoj 2286(虚树+树形dp） 虚树模板

    树链求并又不会写,学了一发虚树,再也不虚啦~ 2286: [Sdoi2011]消耗战 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 5002  Sol ...

  5. 【计算几何】【预处理】【枚举】Urozero Autumn Training Camp 2016 Day 5: NWERC-2016 Problem K. Kiwi Trees

    发现由于角的度数和边的长度有限制,那俩圆如果放得下的话,必然是塞在两个角里. 于是预处理n个圆心的位置(注意要判断那个圆会不会和其他的边界相交),然后n^2枚举俩角即可. #include<cs ...

  6. （原创）Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly Detection&Recommender Systems

    这部分内容来源于Andrew NG老师讲解的 machine learning课程,包括异常检测算法以及推荐系统设计.异常检测是一个非监督学习算法,用于发现系统中的异常数据.推荐系统在生活中也是随处可 ...

  7. Linux通用KVM自动安装Shell脚本（兼容所有Linux发行版/CentOS/Ubuntu）

    官网: https://github.com/retspen/webvirtmgr/wiki/Setup-Host-Server 安装: wget -O - https://retspen.githu ...

  8. 我告诉你MSDN

    https://msdn.itellyou.cn/ 微软的软件,系统,官方下载

  9. 推荐一套WPF主题皮肤

    在CodePlex上发现了一套WPF的主题皮肤,直接应用于系统自带的控件,一共有四种配色方案,做得也还比较精致.感兴趣的朋友可以使用一下.点击下载      另外一套我比较喜欢的皮肤这里也推荐一下吧: ...

  10. [Eclipse插件] 安装和使用JD-Eclipse插件

    JD-Core 是一个免费的库,从一个或多个“.class”文件中 重构Java源代码.JD-Core可以用来恢复丢失的源代码,并深究Java运行时类库.支持Java 5的功能:如注释,泛型或键入“枚 ...