vue指令与事件修饰符
一.条件渲染指令
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if='is_login==true'>欢迎登陆</p>
<p v-else><a href="">登录</a><a href="">注册</a></p>
<!-- v-else不能单独使用,只能跟着v-if或者跟着v-else-if后面,表示或者的意思
v-else会使用上一个v-if作为条件判断,并且v-else和v-if必须紧密相连 --> <!-- 一次只会出现一个结果
v-else-if可以有多个,但是和v-else一样,必须紧跟这v-if后面,不能单独使用 --> <p v-if='num%3==0'>这个数可以被3整除</p>
<p v-else-if='num%5==0'>这个数可以被5整除</p>
<p v-else-if='num%7==0'>这个数可以被7 整除</p>
<p v-else>这个数比较特别</p> <!-- v-show只能单独使用,后面无法跟v-else -->
<p v-show="num>10">num大于10</p>
<p v-show="num<=10">num小于等于10</p>
</div> <script>
let vm=new Vue({
el:'#app',
data:{
is_login:false,
num:5 }, }) </script> </body>
</html>
代码
总结:
1. v-if 的特点：每次都会重新删除或创建元素
2. v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
3. v-if 有较高的切换性能消耗
4. v-show 有较高的初始渲染消耗
5. 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
6. 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
7. v-if后面可以跟else,v-show后面不能跟else
二.列表渲染指令(v-for)
1.在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象(python中的字典)。
实例一:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {}
});
</script>
</body> </html>
列表
实例二:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
},
methods: {}
});
</script>
</body> </html>
对象
实例三:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 -->
<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: '托尼·屎大颗',
gender: '男'
}
},
methods: {}
});
</script>
</body> </html>
带索引的对象
实例四:循环数字从1开始,是一个闭区间
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 -->
<!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始,还是一个闭区间 -->
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body> </html>
数字
实例五:v-forkey的使用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app"> <div>
<label>Id:
<input type="text" v-model="id">
</label> <label>Name:
<input type="text" v-model="name">
</label> <input type="button" value="添加" @click="add">
</div> <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
<!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
<!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '赵高' },
{ id: 4, name: '韩非' },
{ id: 5, name: '荀子' }
]
},
methods: {
add() { // 添加方法
this.list.unshift({ id: this.id, name: this.name })
}
}
});
</script>
</body> </html>
key的使用
三.事件修饰符
.stop阻止事件冒泡
.prevent阻止自身事件
.self只有自身事件才会触发
.capture:捕获事件
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
.inner{
background: blue;
height: 150px;
} .outer{
background:yellow;
padding:40px; }
</style>
</head>
<body>
<div id='app'>
<!-- 使用了.stop 阻止冒泡--外层的事件不会被触发-->
<!-- <div class='inner' @click='innerHandle'>
<input type="button" value='抽我' @click.stop='btnHandle'>
</div> --> <!-- 使用了.prevent 阻止默认行为,连接就不会跳转 -->
<!-- <a href="http://www.baidu.com" @click.prevent='link'>连接事件</a> --> <!-- 使用了.capture 实现捕获触发事件机制,从外到里执行,注意看这个修饰方法是法作用在外层的-->
<!-- <div class='inner' @click.capture='innerHandle'>
<input type="button" value='抽我' @click='btnHandle'>
</div> --> <!-- .self自由是自身点击才会执行,冒泡或者捕获到的都不会执行 -->
<!-- <div class='inner' @click.self='innerHandle'>
<input type="button" value='抽我' @click='btnHandle'>
</div> --> <!--只阻止一次,preven和once的位置没有关系 -->
<!-- <a href="http://www.baidu.com" @click.prevent.once='link'>连接事件</a> --> <!-- .stop和.self的区别 -->
<!-- .self自会阻止自身点击事件,并不会阻止冒泡行为,中间层被self拦截,外层的冒泡行为继续 -->
<!-- stop除了自身,所有的冒泡行为继续 -->
<div class="outer" @click='outer'>
<div class='inner' @click.self='innerHandle'>
<input type="button" value='抽我' @click='btnHandle'>
</div>
</div> </div> <script>
let vm=new Vue({
el:'#app',
data:{ },
methods: {
btnHandle:function() {
console.log('操你大爷') },
innerHandle:function(){
console.log('inner')
},
link:function(){
console.log('触发了连接事件')
},
outer:function(){
console.log('outer') } },
}) </script>
</body>
</html>
事件修饰
vue指令与事件修饰符的更多相关文章
- Vue指令之事件修饰符
事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue中的事件修饰符
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
- 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 怎样在 Vue 中使用 事件修饰符 ?
Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...
- vue学习(六) 事件修饰符 stop prevent capture self once
//html <div id="app"> <div @click="divHandler" style="height:150px ...
- （二）咋使用VUE中的事件修饰符
1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...
- 27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 25.AVG 函数
定义和用法 AVG 函数返回数值列的平均值.NULL 值不包括在计算中. SQL AVG() 语法 SELECT AVG(column_name) FROM table_name SQL AVG() ...
- Part10-C语言环境初始化-C与汇编混合编程lesson4
1.为什么要混合编程 汇编语言:执行效率高:编写繁琐: 执行效率高:能够更直接地控制处理器. c语言:可读性强,移植性好,调试方便. 1.汇编调用c函数 2.c调用汇编函数 汇编语言定义的函数(标号) ...
- Oracle——单行函数
两种 SQL 函数 单行函数 字符函数 大小写控制函数 SELECT employee_id, last_name, department_id FROM employees WHERE last_n ...
- 理解 RESTful WebService
RESTful 服务遵循REST(Representational State Transfer)的架构风格,中文翻译为:表现层状态转化 对于所有的CRUD(Read/Create/Update/De ...
- 黑盒测试实践--Day4 11.28
黑盒测试实践--Day4 11.28 今天完成任务情况: 分块明确自己部分的工作,并做前期准备 完成被测系统--学生管理系统的需求规格说明书 完成Mook上高级测试课程的第六章在线学习,观看自动化测试 ...
- 函数有一个特殊的属性 prototype！
JavaScript 中只有对象,没有类. 实际上,JavaScript 才是真正应该被称为「面向对象」的语言,因为它是少有的可以不通过类,直接创建对象的语言. 函数的 prototype 属性 在 ...
- css总结12：CSS Float(浮动)
1 定义:CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 2 解释:浮动的元素,浮在界面上,脱离了HTML文本流. 元素的水平方向浮动,意味着元素只能左右移动而不能 ...
- Java Thread.join()详解--父线程等待子线程结束后再结束
目录(?)[+] 阅读目录 一.使用方式. 二.为什么要用join()方法 三.join方法的作用 join 四.用实例来理解 打印结果: 打印结果: 五.从源码看join()方法 join是Th ...
- vba实现excel多表合并
Excel多表合并之vba实现 需求 保留列名,复制每一个excel里的数据,合并到一个excel 操作步骤 将要合并的文件放在同一文件夹下,复制过来就好(ps:最好不要直接操作原数据文件,避免操作失 ...
- c++基础知识篇：指针
从面试的反馈来看,这部分可以问的很难. 1.指针与引用的区别 指针是一个变量,用来存放地址的变量.引用是原来变量的存储空间的别名. 2.指针作为参数的要点 a.需要进行指针的合法性检验,防止空指针 ...