<!-- if判断 -->
<div id="app2">
<p v-if="seen"> <!-- 给p标签绑定指令 -->
显示内容
</p>
</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app2 = new Vue({
el: "#app2",
data: {
seen: true
}
});
</script>

在控制台中输入app2.seen 会获得 app2中数据seen的值,同时也可以赋值为false ,这样就会将p标签从文档中移除,如果再将其赋值为true,就会重新显示,而且文档中也会出现p的标签

不会显示

重新显示

vue中指令绑定的v-if逻辑结构的更多相关文章

  1. vue中<select>绑定事件

    <div id="app"> <select v-model="selectItem" @change="selectFn($eve ...

  2. vue中的绑定class和微信小程序中的绑定class的区别

    微信小程序 小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定.在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制 JS dat ...

  3. vue的指令绑定、事件、冒泡

    a标签的属性绑定: v-once:就是第一次渲染什么就是什么,不会随着其他改变而改变,简言之就是绑定他不让他的值改变 防止跨站脚本攻击 如果你觉得安全的话,可以不要让变量的值显示成字符串 解决方法是: ...

  4. vue中v-bind绑定样式

    近来发现v-bind绑定样式的两个好玩的栗子 可以直接绑定到一个样式对象,让模板更清晰: <div id="app"> <div v-bind:style=&qu ...

  5. vue中指令写了一个demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...

  7. Vue 中 双向绑定数据

    1.文本 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. Vue中 v-for 绑定key和不绑定key的区别

    首先,它们区别主要在于 虚拟DOM的复用,绑定key可以更好的复用,下面来详细讲一下 假如我们有一个数组 arr = [1,2,3,4],我们要在2后面插入一个值9: 如果绑定了key值,那么会是这样 ...

  9. Vue 中循环绑定v-module表单

    子组件有一个列表要做输入验证 <template> <div> <el-form :model="value" ref="numberVal ...

随机推荐

  1. LeetCode 1059. All Paths from Source Lead to Destination

    原题链接在这里:https://leetcode.com/problems/all-paths-from-source-lead-to-destination/ 题目: Given the edges ...

  2. WinDbg常用命令系列---显示段选择器dg、链接列表dl和字符串ds/dS

    dg (Display Selector) dg命令显示指定选择器的段描述符. dg FirstSelector [LastSelector] 参数: FirstSelector指定要显示的第一个选择 ...

  3. Phalcon框架的编译安装 内存不足的解决办法

    对症解决 有两种解决方法,一种是提升ECS系统内存.但是却要真金白银跟阿里云去购买的.另一种,则是手动创建swap交换文件.下面来介绍第二种方法. 第一步:首先确定系统是否已经开启swap交换分区: ...

  4. gulp初体验

    项目流程 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 常用命令简介: node -v 查 ...

  5. C博客作业01--分支,顺序结构1

    0.展示PTA总分 1.本章学习总结 1.1 学习内容总结 1.学习了if--else,else--if的分支嵌套结构 if (判断条件) { 执行语句1: } else { 执行语句2: }//用来 ...

  6. P2052 [NOI2011]道路修建——树形结构(水题,大佬勿进)

    P2052 [NOI2011]道路修建 这个题其实在dfs里面就可以把事干完的,(我一开始还拿出来求了一把)…… 一条边的贡献就是儿子的大小和n-siz[v]乘上边权: #include<cma ...

  7. 【cf比赛练习记录】Codeforces Round #579 (Div. 3)

    思考之后再看题解,是与别人灵魂之间的沟通与碰撞 A. Circle of Students 题意 给出n个数,问它们向左或者向右是否都能成一个环.比如样例5是从1开始向左绕了一圈 [3, 2, 1, ...

  8. D3.js的v5版本入门教程(第九章)——完整的柱状图

    D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...

  9. 007 webpack基本的用法

    1.安装node.js 因为webpack是基于node.js的 2.新建目录 3.需求 列表的隔行变色 4.初始化 在终端中使用npm init命令可以自动创建这个package.json文件  n ...

  10. t420 win7 硬盘安装ubuntu 10.04 LTS 备忘

    http://zhangwen.sinaapp.com/?p=5 t420 win7 硬盘安装ubuntu 10.04 LTS 备忘 发表于 2011 年 10 月 25 日 对ubuntu的新版没有 ...