正文 

当前位置： 首页 > java > java语法

vue.js学习笔记：在元素和template中使用v-if指令

简庆旺的博客      2022-02-10     497

关键词：

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学习笔记

1、父子组建：：子组件只能在父组件的template中使用。2、组件的el和data选项传入Vue构造器的多数选项也可以用在 Vue.extend() 或Vue.component()中，不过有两个特例： data和el。Vue.js规定：在定义组件的选项时，data和el选项... 查看详情

北风网-vue.js学习笔记

 第3节视频：Vue.js的构造器和扩展一、Vue.js的构造器　　1、每个Vue.js应用都是通过构造函数Vue创建一个根实例。　　　　varvm=newVue({　　　　　　//选项　　　　});　　二、在实例化Vue时，需要传入一个JSON对象，它可以包含... 查看详情

vue.js学习笔记-修饰符

本篇将简单介绍常用的修饰符。在上一篇中，介绍了 v-model 和 v-on 简单用法。除了常规用法，这些指令也支持特殊方式绑定方法，以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。&... 查看详情

vue学习笔记入门篇——组件的使用

本文为转载，原文：Vue学习笔记入门篇——组件的使用组件定义组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情... 查看详情

vue.js学习笔记（vuejs——组件——props数据传递）

①组件实例的作用域：是孤立的，简单的来说，组件和组件之间，即使有同名属性，值也不共享。<divid="app"><add></add><del></del></div><script>varvm=newVue({el:‘#app‘,components:{"add":{template:"<button> 查看详情

Vue.js 错误：命名插槽必须在自定义元素上使用 '<template>'

】Vue.js错误：命名插槽必须在自定义元素上使用\\\'<template>\\\'【英文标题】：Vue.jserror:Namedslotsmustuse\'<template>\'onacustomelementVue.js错误：命名插槽必须在自定义元素上使用\'<template>\'【发布时间】：2021-11-2908:10:00【问... 查看详情

vue学习笔记初识vue——创建vue示例(代码片段)

...露出一个全局类vue用全局类vue创建一个vue实例varvm=newVue（template：‘<h1>fffff</h1>’//配置项template，以类似HTML的语法来编制视图结构）渲染vue实例  查看详情

从零开始学习vue.js，学习笔记

一、为什么学习vue.jsmethods只有纯粹的数据逻辑，而不是去处理DOM事件细节。vue.js兼具angular.js和react的优点，并且剔除了他们的缺点官网：http://cn.vuejs.org/手册：http://cn.vuejs.org/v2/api/二、vue.js是什么Vue是一个"MVVM框架（库）"，和ang... 查看详情

vue.js学习笔记六(代码片段)

...cript><script>//1。创建组件构造器constcpnC=Vue.extend(template:`<div><h2>我是标题</h2><p>我是内容,哈哈哈</p></div>`)//2.注册组件(全局组件,意味着可以在多个Vue的实例下面使用)//Vue.component('cpn'... 查看详情

vue.js学习笔记四(代码片段)

一、v-for遍历数组当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成v-for的语法类似于JavaScript中的for循环格式如下：iteminitems的形式我们来看一个简单的案例：如果在遍历的过程中不需要使用索引值v-for=... 查看详情

vue项目中main.js、vue.js和index.html的关系

...p.vue和main.js两个文件，App.vue就是个组件App.vue中可以写<template>、js、<style>，其中必须要有exportdefault来表示对外输出本模块main.js是初始化vue实例并使用需要的插件首先引入了Vue库和App.vue，创建了一个vue实例，template和comp... 查看详情

vue学习笔记目录

本文为转载，原文：Vue学习笔记目录Vue介绍Vue.js是当下很火的一个JavaScriptMVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。如果你之... 查看详情

vue.js学习笔记：如何加载本地json文件

在项目开发的过程中，因为无法和后台的数据做交互，所以我们可以自建一个假数据文件(如data.json)到项目文件夹中，这样我们就可以模仿后台的数据进行开发。但是，如何在一个vue.js项目中引入本地的json文件呢，下面就将步骤... 查看详情

vue.js第2篇学习笔记

vue.js最强大的，应该是自动更新DOM了。只要把变量包裹在{{}}里面，就会在处理完毕后，直接显示处理后的结果。貌似所有变量都可以放在一个vue对象的data属性里面，然后就可以在储存函数的computed,methods属性里面通过this关键字... 查看详情

vue.js学习笔记六(代码片段)

一、全局组件和局部组件当我们通过调用Vue.component（）注册组件时，组件的注册是全局的这意味着该组件可以在任意Vue示例下使用如果我们注册的组件是挂载在某个实例中，那么就是一个局部组件<divid="ap... 查看详情

vue.js学习笔记-起步

本篇将简单介绍一下Vue.js，并在Node.js环境下搭建一个简单的Demo。一、简介我个人理解，Vue.js是一套前端视图层的框架，它只关心视图展示和数据绑定，它的一些语法与Angular1非常相似，如果有Angular1相关的使用经验，上手会非常... 查看详情

使用 nuxt.js 和 vue.js 在 <template> 标记内加载脚本

】使用nuxt.js和vue.js在<template>标记内加载脚本【英文标题】：Loadscriptinsidethe<template>tagusingnuxt.jsandvue.js【发布时间】：2018-05-0717:29:21【问题描述】：我正在使用nuxt.js（基于vue.js）构建自定义网站，我需要使用合作伙伴提... 查看详情

vue学习笔记入门篇——组件的内容分发(slot)

本文为转载，原文：Vue学习笔记入门篇——组件的内容分发(slot)介绍为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发(或“transclusion”如果你熟悉Angular)。Vue.js实现了一... 查看详情