<!-- 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. 实训作业5(lang、util)

    实验内容和原理: 1.将布尔型.整型.长整型.双精度型作为参数,实例化相应的包装类对象,并输出对象的数值. package 包装; public class integer { public stat ...

  2. jmeter使用教程

    jmeter是基于JVM(最新版本基于jdk8+)的压测工具包.提供了丰富的工具来设置压测计划,执行压测任务和生成压测报告. 我这边使用的是windows10平台. 整个流程如下: 1.下载jmete ...

  3. CF 768B

    CF 768B题意:In each operation Sam must remove any element x, such that x>1, from the list and inser ...

  4. Spark-Streaming kafka count 案例

    Streaming 统计来自 kafka 的数据,这里涉及到的比较,kafka 的数据是使用从 flume 获取到的,这里相当于一个小的案例. 1. 启动 kafka Spark-Streaming ...

  5. eos的资源和工具列表

    1.eos买rex的时候同时获得投票收益: https://b1.run/eosproxy eos的投票衰减规则: Block.one 希望确保用户经常更新他们的投票设定,而不是设置完就不管了.为了促 ...

  6. Xamarin图表开发基础教程(3)OxyPlot框架

    Xamarin图表开发基础教程(3)OxyPlot框架 Xamarin.Android中使用OxyPlot框架 在Xamarin.Android平台上实现图表显示需要完成以下的步骤: 1.添加OxyP ...

  7. Linux_CentOS下搭建Nodejs 生产环境-以及nodejs进程管理器pm2的使用

    nodejs安装:https://www.cnblogs.com/loaderman/p/11596661.html nodejs 进程管理器 pm2 的使用 PM2 是一款非常优秀的 Node 进程 ...

  8. python2中的unicode()函数在python3中会报错:

    python2中的unicode()函数在python3中会报错:NameError: name 'unicode' is not defined There is no such name in P ...

  9. VS Code中配置python版本以及Python多版本

    VS Code中配置python版本VS Code十分方便配置python的版本:可以选在在本地setting.json或者全局setting.json文件中配置:python.pythonPath在 ...

  10. Java通过行为参数化传递代码

    在软件工程中,一个众所周知的问题就是,不管做什么,用户的需求肯定会变.如何应对这样不断变化的需求?理想的状态下,应该把的工作量降到最少.此外,类似的新功能实现起来还应该很简单,而且易于长期维护.行为参 ...