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. 构造HTTP请求Header实现“伪造来源IP”（转）

    原文:http://zhangxugg-163-com.iteye.com/blog/1663687 构造 HTTP请求 Header 实现“伪造来源 IP ” 在阅读本文前,大家要有一个概念,在实现 ...

  2. [转载]WorldWind实时确定、更新、初始化和渲染地形和纹理数据

    WorldWind实时确定.更新.初始化和渲染地形和纹理数据 原文链接: http://www.cnblogs.com/rainbow70626/p/5597267.html 当用户点击WorldWi ...

  3. kernel内核配置说明

    内核过程中的配置这一步做详细的说明吧,总结一下,多数内容源于网上的多篇文章. 首先,配置时可能出现的选项,对其选择先来个说明吧. Typically, your choices for each op ...

  4. 基于struts2--实现文件上传下载

    1. 文件的上传: 1). 表单需要注意的 3 点 ①. method="post"     ②. enctype="mulitipart/form-data" ...

  5. JS随机数种子

    JS随机数种子 1 试着想一下,如果在某一个场景,我们做一个游戏,用户玩到一半的时候退出了,这样 用户下次进来可以选择继续上一次的进度继续玩,那么现在问题来了:用户玩 的进度以及用户的积分等简单的描述 ...

  6. Status Code状态码详解对照表

    状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在 ...

  7. R语言统计词频 画词云

    原始数据: 程序: #统计词频 library(wordcloud) # F:/master2017/ch4/weibo170.cut.txt text <- readLines("F ...

  8. jQuery源码分析--Event模块（1）

    jQuery的Event模块提供了强大的功能:事件代理,自定义事件,自定义数据等.今天记录一下它实现的原理. 我们都知道,在js的原生事件中,有事件对象和回调函数这两样东西.但是事件对象是只读的,所以 ...

  9. 使用idea创建JavaWeb项目

    [第一步] File---New---Project [第二步] 选择Java Enterprise版本,然后配置tomcat 注意:这里关联的tomcat home指的是tomcat的解压目录(bi ...

  10. 项目中使用protobuf 3.0

    protocol buffer从3.0 原生的compiler支持c++,Java,Python,Go,Ruby,JavaNano,JavaScript,Objective-C,C#,PHP这篇文章作 ...