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 ...
随机推荐
- 8.INSERT INTO 语句 UPDATE 语句
1. INSERT INTO 语句 INSERT INTO 语句用于向表格中插入新的行. 语法 INSERT INTO 表名称 VALUES (值1, 值2,....) INSERT INTO Per ...
- Cookie的有效访问路径
Cookie 的 作用范围: Cookie详解:https://www.cnblogs.com/handsomecui/p/6117149.html 可以作用当前目录和当前目录的子目录. 但不能作用于 ...
- 对C#泛型讲的很好的一篇文章
请参考 https://www.cnblogs.com/kissdodog/archive/2013/01/27/2879185.html
- Xcode弱网测试工具
Network Link Conditioner Network Link Conditioner工具是Mac下提供的一个弱网测试工具. 安装Network Link Conditioner Xcod ...
- 【Azure Active Directory】单一登录 （SAML 协议）
Azure Active Directory 支持 SAML 2.0 Web 浏览器单一登录 (SSO) 配置文件. 若要请求 Azure Active Directory 对用户进行身份验证时,云服 ...
- 编写高质量代码改善C#程序的157个建议——建议37：使用Lambda表达式代替方法和匿名方法
建议37:使用Lambda表达式代替方法和匿名方法 在建议36中,我们创建了这样一个实例程序: static void Main(string[] args) { Func<int, int, ...
- xubuntu14.04LTS安装steam后运行的错误解决办法
我在ubuntu14.10中没碰到过这个问题,但在xubuntu14.04LTS中碰到 Steam needs to install these additional packages: libgl1 ...
- Graphics 小记
1.切图 drowg.DrawImage(productImg1, new System.Drawing.Rectangle(30, 30, 300, 300), new System.Drawing ...
- spring深入了解心得
spring 主要核心组件 :Core.上下文(Context) .实体(Bean): spring 主要由两大特色:控制反转(IOC).面向对象(AOP): spring中Core主要用于组建Bea ...
- angular 第二种依赖注入
import { Injectable } from '@angular/core'; import { ProductServiceService, Product } from './produc ...