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 pip源配置

    一.Linux版本: linux的文件存放在:~/.pip/pip.conf 二.windows版本: 在用户文件夹下创建pip目录,并在pip目录下创建pip.ini文件(%HOME%\pip\pi ...

  2. sql server中带有output的DML

    OUTPUT是SQL SERVER2005的新特性.可以从数据修改语句中返回输出.可以看作是"返回结果的DML".INSERT,DELETE,UPDATE均支持OUTPUT子句.在 ...

  3. 入坑-DM导论-第一章绪论笔记

    //本学习笔记只是记录,并未有深入思考. 1.什么是数据挖掘? 数据挖掘是数据库中发现必不可少的一部分. 数据预处理主要包括(可能是最耗时的步骤): 1.融合来自多个数据源的数据 2.清洗数据以消除噪 ...

  4. Cocos2d-JS实现的打飞机

    一.前言 今天我们来讲一个最最最常见的一个小游戏--打飞机!是的,打飞机!还记得小时候在玩儿的雷电,应该是打飞机最早的样子了吧.直到现在,也有微信打飞机,全民飞机大战,全民打飞机等游戏的出现,这些游戏 ...

  5. IBM WebSphere MQ for net 报错 MQRC_NOT_AUTHORIZED

    最近进入新公司要维护以前的90年代的老系统 用NET对IBMMQ做测试 NET 4.0 +7.5 MQ 版本 待我写好NET调用的代码后出现错误MQRC_NOT_AUTHORIZED 折腾大半天往上找 ...

  6. 《FontForge常见问题FAQ》字王翻译版

    <FontForge常见问题FAQ> 字王翻译版 原文: http://fontforge.github.io/en-US/faq/ 翻译: 字王·中国   blog: http://bl ...

  7. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  8. JS中的slice和splice

    1,slice  : 定义:接收一个或两个参数,它可以创建一个由当前数组中的一项或多项组成的新数组,注意是新数组哦~ 也就是说它不会修改原来数组的值. 用法:slice( para1 ),会截取从pa ...

  9. kali_install_complete_no_sound

    参考:http://tieba.baidu.com/p/4343219808 用pulseaudio --start会看到一些信息,提示类似root用户之类的 我是用下面这个方法搞定的 systemc ...

  10. linux内核启动时报错ubi0 error: validate_ec_hdr: bad data offset 256, expected 128

    1.错误解析 ubi的EC header中有一个字段data_offset来记录数据偏移,数据偏移必须正确才能正确读取每一个物理擦除块中的数据 2.解决方法 擦除整块flash,然后再重新烧写包含ub ...