<!-- 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. 基于思岚A1激光雷达+OpenGL+VS2017的Ramer-Douglas-Peucker算法的实现

    时隔两年 又借到了之前的那个激光雷达,最老版本的思岚A1,甚至不支持新的固件,并且转接板也不见了,看了下淘宝店卖¥80,但是官方提供了一个基于STM32的实现方式,于是我估摸着这个转接板只是一个普通的 ...

  2. 《三体》刘慈欣英文演讲:说好的星辰大海你却只给了我Facebook

    美国当地时间2018日11月8日,著名科幻作家刘慈欣被授予2018年度克拉克想象力贡献社会奖(Clarke Award for Imagination in Service to Society),表 ...

  3. 第12组 Alpha冲刺(4/6)

    Header 队名:To Be Done 组长博客 作业博客 团队项目进行情况 燃尽图(组内共享) 由于这两天在修bug,燃尽图没有下降 展示Git当日代码/文档签入记录(组内共享) 注: 由于Git ...

  4. Android中创建自定义控件

    1.创建一个TitleLayout继承LinearLayout: //创建自定义控件 public class TitleLayout extends LinearLayout { private f ...

  5. ranger整合kerberos

    一.生成主体 在kerberos服务器生成用于ranger的用户主体: # kadmin.local addprinc -randkey HTTP/manager1@HADOOP.COM addpri ...

  6. POI报表打印

    一.Excel报表(POI) 1.需求说明 在企业级应用开发中,Excel报表是一种最常见的报表需求.Excel报表开发一般分为两种形式: 1.为了方便操作,基于Excel的报表批量上传数据 2.通过 ...

  7. 帝国cms万能标签实现标题截取后自动加入省略号的方法

    很多采用帝国CMS建站的站长都会遇到标题过长导致页面排版错乱的情况,这时候往往需要用标题截取并追加上省略号的方法予以解决.对此,帝国CMS万能标签标题截取后自动加入省略号,没有达到字数的则不加省略号可 ...

  8. vue on-change 如果有循环的timer 则无限自动执行

    <div class="contract-class"> <Checkbox v-model="smallChecked" :on-chang ...

  9. Jmeter工具功能介绍

    可以去官方学习:http://jmeter.apache.org/ 1.可以修改语言 2.部分图标功能 新建 打开一个jmeter脚本 保存一个jmeter脚本 剪切 复制 粘贴 展开目录树 收起目录 ...

  10. 第10组 Alpha冲刺(5/6)

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 学习调用中国天气网API,接近实现天气推送功能 对天气推送的形式进行讨论及重确 ...