vue中指令绑定的v-if逻辑结构
<!-- 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逻辑结构的更多相关文章
- vue中<select>绑定事件
<div id="app"> <select v-model="selectItem" @change="selectFn($eve ...
- vue中的绑定class和微信小程序中的绑定class的区别
微信小程序 小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定.在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制 JS dat ...
- vue的指令绑定、事件、冒泡
a标签的属性绑定: v-once:就是第一次渲染什么就是什么,不会随着其他改变而改变,简言之就是绑定他不让他的值改变 防止跨站脚本攻击 如果你觉得安全的话,可以不要让变量的值显示成字符串 解决方法是: ...
- vue中v-bind绑定样式
近来发现v-bind绑定样式的两个好玩的栗子 可以直接绑定到一个样式对象,让模板更清晰: <div id="app"> <div v-bind:style=&qu ...
- vue中指令写了一个demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中组件绑定事件时是否加.native
组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...
- Vue 中 双向绑定数据
1.文本 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- Vue中 v-for 绑定key和不绑定key的区别
首先,它们区别主要在于 虚拟DOM的复用,绑定key可以更好的复用,下面来详细讲一下 假如我们有一个数组 arr = [1,2,3,4],我们要在2后面插入一个值9: 如果绑定了key值,那么会是这样 ...
- Vue 中循环绑定v-module表单
子组件有一个列表要做输入验证 <template> <div> <el-form :model="value" ref="numberVal ...
随机推荐
- 开源项目(4-2)手势识别-Keras/Theano/OpenCV实现的CNN手势识别
https://github.com/asingh33/CNNGestureRecognizer 我提供了两种捕获模式: 二进制模式:在这里我首先将图像转换为灰度,然后应用高斯模糊效果和自适应阈值滤波 ...
- LeetCode 1087. Brace Expansion
原题链接在这里:https://leetcode.com/problems/brace-expansion/ 题目: A string S represents a list of words. Ea ...
- am335x system upgrade kernel ethernet(四)
1 Scope of Document This document describes ethernet hardware design and porting KZS8081 to ubo ...
- 关于异常System.ArgumentException
什么是System.ArgumentException 当向方法提供的参数之一无效时引发的异常. 继承 Object Exception SystemException ArgumentExcepti ...
- gitbase 集成sqler 进行git 代码分析
gitbase 是一个方便的git sql 查询引擎,sqler 是一个很不错的sql 转rest api工具,以下是一个简单的集成测试 项目使用docker-compose 运行 环境准备 do ...
- ipcs
用于报告Linux中进程间通信设施的状态,显示的信息包括消息列表.共享内存和信号量的信息
- bootstrap导航条组件
一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...
- gulp开发工具之postcss
参考文章:http://www.cnblogs.com/givebest/p/4771154.html package.json { "name": "postcss&q ...
- Java连接excel实现:通过姓名查找id和通过id查找姓名
注意每个方法结束都要关闭workbook: 还有getIdbyname()方法中字符串flag与name的比较,一定要用equals()方法!!!: 剩下的不多解释,注释都在代码中: import j ...
- 让你的shell更体贴
使用shell的时候很多,特别是拉幕式终端,使用时更加方便,同时可以利用 echo "Did you know that:" ;whatis $(ls /bin | shuf -n ...