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. Ubuntu下安装Nginx详细步骤

    Nginx安装之前需要三个支持: 模块依赖性 ①gzip 模块需要 zlib 库 ②rewrite 模块需要 pcre 库 ③ssl 功能需要 openssl 库 预先编译好的包: sudo apt- ...

  2. 006-ant design -结合echart-地址map市

    基于上节的引用 // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入 ECharts 图形模块 import 'echa ...

  3. Flask系列之蓝图中使用动态URL前缀

    让我们先来看一个简单的例子,假设有下面这样一个蓝图(是关于用户主页的): from flask import Blueprint, render_template profile = Blueprin ...

  4. SpringData关键字查询练习

    我们在上一节知道SpringData关键字有很多,我就拿几个例子练练手 1.需求我们查询lastName like sun and id < ?的查询 package com.fxr.sprin ...

  5. VS2010/MFC编程入门之三十（常用控件：树形控件Tree Control 上）

    前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control. 树形控件简介 树形控件在Windows系统中是很常见的,例如资源管理器左侧的 ...

  6. 牛客国庆集训派对Day3 Solution

    A    Knight 留坑. B    Tree 思路:两次树形DP,但是要考虑0没有逆元 可以用前缀后缀做 #include <bits/stdc++.h> using namespa ...

  7. hdu4758 Walk Through Squares

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=4758 题目: Walk Through Squares Time Limit: 4000/20 ...

  8. 忘记oracle的sys用户密码怎么修改以及Oracle 11g 默认用户名和密码

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  9. mssql查询所有上下级

    if exists (select * from sys.all_objects where name='GetOrgTreeByID') begin drop proc GetOrgTreeByID ...

  10. Xilinx SD controller

    Features supported by driver Zynq All the HW/IP features are supported by driver ZynqMP All the HW/I ...