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. SQL基础--查询之一--单表查询

    SQL基础--查询之一--单表查询

  2. centos7 python3 安装

    mkdir /usr/python3.5 tar -xf Python-3.5.1.tgz cd Python-3.5.1 ./configure --prefix=/usr/python3.5 ma ...

  3. [World Wind学习]21.影像切割

    本来希望从GlobeMapper中生成切片直接加载到WorldWind中,但是没有成功!所以想比较一下和dstile生成的瓦片到底有什么区别? 所以这才第一次生成并加载了影像瓦片.貌似和GlobeMa ...

  4. 【开发者笔记】利用shp2pgsql将shape文件导入到postgresql中

    导入shp文件到postgresql中 1.首先,你需要让shp2pgsql命令可用,百度下载,加入环境变量即可. 下载地址:https://download.osgeo.org/postgis/wi ...

  5. 学习Mysql的记录贴 记录的内容是 指令的试用

    前言:操作系统是WIn7 64位 旗舰版   ,Mysql的版本是mysql-5.7.10-winx64 是社区版 就是所谓的最后的免费版本. 下载后 解压 然后配置my.ini文件. ××××××× ...

  6. python 面向对象编程学习总结

    面向对象是个抽象的东西,概念比较多,下面会一一介绍. 一.类和实例 类(Class)和实例(Instance)是面向对象最重要的概念. 类是指抽象出的模板.实例则是根据类创建出来的具体的“对象”,每个 ...

  7. Django进阶 (二)

    规范 确立规范的好处: 代码可读性高 方便代码的定位极其查找 为以后代码扩容带来便利 场景: 在多个APP的场景下,单个app的URL函数功能较多的时候,我们可以通过以下方法来解决. 把Views写成 ...

  8. 3.11 Templates --Rendering with Helpers

    Ember提供几个辅助器允许你使用不同的方法渲染模板(render templates). 一.The {{partial}} Helper {{partial}}以呈现的模板作为参数,并在这里呈现模 ...

  9. ng-深度学习-课程笔记-6: 建立你的机器学习应用(Week1)

    1 训练/验证/测试集( Train/Dev/test sets ) 构建神经网络的时候有些参数需要选择,比如层数,单元数,学习率,激活函数.这些参数可以通过在验证集上的表现好坏来进行选择. 前几年机 ...

  10. AVAudioFoundation(5)：音视频导出

    本文转自:AVAudioFoundation(5):音视频导出 | www.samirchen.com 本文主要内容来自 AVFoundation Programming Guide. 要读写音视频数 ...