f 指令

语法比较简单，直接上代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="wangtuizhijiademo">

    <p v-if="instruction">在Vue.js中，当判断语句为true,可以显示信息，当为false时候不显示</p>

    <template v-if="show1">

      <p>我是 show1，默认是开启的（true），当你设置false我不显示！</p>

    </template>

    <template v-if="show2">

        <p>我是 show2，默认是关闭的，当你设置show2的值为true，我会被显示！</p>

    </template>

</div>

<script>

    new Vue({

        el: '#wangtuizhijiademo',

        data: {

            instruction:true,

            show1: true,

            show2: false

        }

    })

</script>

</body>

</html>

true为开启状态，false为关闭状态。

有兴趣的可以试试把 show2: false的false改为true，可以看到两条信息，如下：

在Vue.js中，当判断语句为true,可以显示信息，当为false时候不显示

我是 show1，默认是开启的（true），当你设置false我不显示！

我是 show2，默认是关闭的，当你设置show2的值为true，我会被显示！

本人博客地址：Vue.js学习笔记：在元素 和 template 中使用 v-if 指令http://www.wangtuizhijia.com/archives/207

Vue.js学习笔记：在元素 和 template 中使用 v-if 指令的更多相关文章

  1. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  2. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  3. Vue.js 学习笔记之五：编译 vue 组件

    正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器, ...

  4. Vue.js学习笔记-script标签在head和body的区别

    初学JavaScript,项目需要没有系统学习,只能边查资料边码代码,埋下的坑不知道有多少,还是建议时间充足的情况下系统的将Javascript学习一遍 ,涉及的HTML知识也务必了解. 问题 最开始 ...

  5. Vue.js——学习笔记（一）

    Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...

  6. Vue.js 学习笔记之四：Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

  7. Vue.js——学习笔记

    Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...

  8. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  9. Vue.js 学习笔记之二：数据驱动开发

    在 Vue.js 框架中,与 HTML 页面元素的交互方式没有像原生 JavaScript 接口那么直接,它是通过先在 HTML 元素标签中嵌入一系列类似于普通标签属性的 Vue 指令属性来绑定数据, ...

随机推荐

  1. python __init__ 构造函数

    实例化过程 会执行__init__ 的函数方法 class SQLHelper: def __init__(self): # self = s1 print("helo") def ...

  2. Linux内核之vmlinux与vmlinuz

    因为是初次系统的学习Linux内核,过程中遇到了一些常常出现的名词.似曾相识,但对他们的含义又不是非常清楚.因此,将搜索到的内容进行一下汇总. 1.vmlinux   vmlinux是一个包括linu ...

  3. vue开发笔记

    1.一定要弄明白什么是数据驱动,以前jQuery操作dom的那种思维模式可以不去考虑,在类似框架中任何一个效果的完成都是由数据驱动来完成的. 2.以.vue作为扩展名的文件,是vue组件,他是一个类, ...

  4. SpringData_PagingAndSortingRepository接口

    该接口提供了分页与排序功能 Iterable<T> findAll(Sort sort); //排序 Page<T> findAll(Pageable pageable); / ...

  5. SqlServer2005 各版本区别

    SQL2005 分五个版本,如下所列, 1.Enterprise(企业版), 2.Development(开发版), 3.Workgroup,(工作群版) 4.Standard,(标准版) 5.Exp ...

  6. 【android】如何让WebView对Video标签的支持更强力

    先说结论:各个产商对HTML5特性支持的程度不一样,用默认的WebChromeClient不能普遍适用. 因此咱基于GITHUB上一个VideoEnabledWebView库做了自己的封装,在魅族.华 ...

  7. MySQL基准测试工具--sysbench

    我们需要知道的是sysbench并不是一个压力测试工具,是一个基准测试工具.linux自带的版本比较低,我们需要自己安装sysbench. [root@test2 ~]# sysbench --ver ...

  8. linux及安全《Linux内核设计与实现》第一章——20135227黄晓妍

    <linux内核设计与实现>第一章 第一章Linux内核简介: 1.3操作系统和内核简介 操作系统:系统包含了操作系统和所有运行在它之上的应用程序.操作系统是指整个在系统中负责完成最基本功 ...

  9. IntelliJ IDEA 常用快捷键，maven依赖图，个性化设置,禁用Search Everywhere

    查看idea 中jar关系图 快捷键: Ctrl+/ 用于注释,取消注释 Ctrl+Shift+F 全文搜索 Ctrl+F 单页面查找 Ctrl+Alt+Shift+L  格式化代码 ======== ...

  10. 【P4语言学习】basic_routing.p4

    headers.p4 /* Copyright 2013-present Barefoot Networks, Inc. Licensed under the Apache License, Vers ...