<!-- 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. globing通配符

    匹配标点符号 linux中只要不含有/的文件就可以生成,所以标点符号也是符合要求的 匹配空白 使用\对空白进行转义,这样就可以生成包含空格名称的文件 但是不推荐这样用,容易让别人在使用的时候造成误解 ...

  2. 【树形DP】骑士

    骑士 题目描述 \(Z\)国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的\(Y\)国发动了一场针对Z国的侵略 ...

  3. 前端微信小程序生鲜类仿爱鲜蜂微信小程序

    需求描述及交互分析设计思路和相关知识点首页界面布局设计闪送超市纵向导航设计商品添加到购物车设计购物车商品显示设计收货地址列表显示设计新增收货地址设计 交互分析(1)底部标签导航有首页.闪送超市.购物车 ...

  4. @submit.native.prevent作用

    <el-form :inline="true" :model="geCarManageData" class="demo-form-inline ...

  5. 微信小程序之确认框实现

    效果图如下: 核心代码如下: delType:function(e){ var typeId = e.currentTarget.dataset['id']; console.log("de ...

  6. 剑指offer:数组中只出现一次的数字

    题目描述: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 思路分析: 1. 直接想法,每个数字遍历,统计出现次数,复杂度O(n^2),超时. 2. 借助 ...

  7. react项目如何运行

    react项目如何运行 一.总结 一句话总结: npm i 安装好package.json的 指定插件后,npm start 启动项目 二.react项目的安装与运行 转自或参考:react项目的安装 ...

  8. Maven中依赖的scope的依赖范围

    在Maven中依赖的域有这几个:import.provided.runtime.compile.system.test 1compile 的范围 当依赖的scope为compile的时候,那么当前这个 ...

  9. 关于资源获取(请把https改为http)

    所有demo以及资源获取,请把https改为http.

  10. elementUI 的el-dialog作为子组件,父组件如何控制其关闭的按钮

    这里有三点需要说明: 1. 使用:before-close="closeHandle" 将其 $emit() 出去 2. 取消按钮 也需要$emeit出去 3. 控制对话框显示隐藏 ...