<!-- 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. Python爬虫进阶 | 异步协程

    一.背景 之前爬虫使用的是requests+多线程/多进程,后来随着前几天的深入了解,才发现,对于爬虫来说,真正的瓶颈并不是CPU的处理速度,而是对于网页抓取时候的往返时间,因为如果采用request ...

  2. CSS链接伪类:超链接的状态

    一.状态: a:link{属性:值;} 链接默认状态 a:visited{属性:值;} 链接访问之后的状态 a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接 ...

  3. rust-vmm 学习

    V0.1.0 feature base knowledge: Architecture of the Kernel-based Virtual Machine (KVM) 用rust-vmm打造未来的 ...

  4. NIO Channel SocketChannel ServerSocketChannel

    ServerSocketChannel: ServerSocketChannel是一个基于通道的socket监听器.它同我们所熟悉的java.net.ServerSocket执行相同的基本任务,不过它 ...

  5. 第10组 Beta冲刺(4/5)

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 将数据分析以可视化形式展示出来 新增数据分析展示等功能API 服务器后端部署, ...

  6. maven依赖 dependency中scope=compile 和 provided区别

    问题再现 上次这边朋友问我一个问题,就是他们在pom.xml中的dependency中,看到有一些是provided的情况,比如如下: <dependency> <groupId&g ...

  7. Android相关属性的介绍:android:exported = true

    在Activity中该属性用来标示:当前Activity是否可以被另一个Application的组件启动:true允许被启动:false不允许被启动. android:exported 是Androi ...

  8. oracle update from多表性能优化一例

    这几天测试java内存数据库,和oracle比较时发下一个update from语句很慢,如下: update business_new set fare1_balance_ratio = (sele ...

  9. Spring cloud微服务安全实战-7-5配置grafana图表及报警

    先过一下grafana的配置文件 grafana的配置文件. 右键服务的地址.发信人 账号 和面等 配置要连到prometheus上. 登陆的密码是多少,第二行是不允许用户注册. dashboard. ...

  10. windows系统下同时安装mysql5.5和8.0.11

    前提:电脑已安装5.5,增安装8.0.11 zip版本 1.官网下载mysql10.8.0.11 —找到mysql community server 为下载页面URL:https://dev.mysq ...