详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on


Posted in Javascript onOctober 12, 2018

Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。

Vue.js提供了一些常用的内置指令,如下:

v-if指令

v-for指令

v-show指令

v-else指令

v-bind指令

v-on指令

1:v-if指令

v-if指令是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:

v-if="expression"

expression是一个返回布尔值的表达式,表达式可以是一个布尔值属性,也可以是一个返回布尔值的运算式。

Eg:

<div id="app">
  <h1>Hello, Vue.js!</h1>
  <h1 v-if="yes">Yes!</h1>
  <h1 v-if="no">No!</h1>
  <h1 v-if="age >= 18">Age: {{ age }}</h1>
  <h1 v-if="name.indexOf('li') >= 0">Name: {{ name }}</h1>
 </div>
 var app= new Vue({
  el: '#app',
  data: {
  yes: true,
  no: false,
  age: 20,
  name: 'lililili'
  }
 })

        //数据的yes属性为true,所以"Yes!"会被输出;

//数据的no属性为false,所以"No!"不会被输出;

//运算式age >= 18返回true,所以"Age: 28"会被输出;

//运算式name.indexOf('li') >= 0返回false,所以"Name: lililili"会被输出。

V-if只能控制一个元素上的是否显隐,对于多个元素控制我们可以使用一个template元素实现

在vue中我们想使用条件模板直接在dom元素上使用v-if指令,v-if指令的值表示vue实例对象上的数据值

Tempalte是vue提供的一个自定义元素,写在这个里面的 元素会根据template v-if属性来控制显隐,在渲染以后这个元素会被vue删除掉,(v-if指令元素保留)

<div id="app">
<template v-if="type">
<span>{{type}}</span> <span> | </span>
</template>
<strong>{{title}}</strong>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 数据
var data = {
title: '哈哈哈',
type: '科技'
}
var app = new Vue({
el: '#app',
data: data
})

2:v-for指令

v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:

v-for="item in items"

items是一个数组,item是当前被遍历的数组元素。

Eg:

<ul id="app">
<li v-for="item in list">{{item}}</li>
</ul>
/var data = [
'快乐大本营',
'奔跑吧兄弟',
'极限挑战'
]
var app = new Vue({
el: '#app',
data: {
list: data
}
})

与v-if一样v-for也可以应用在template元素上,此时可以实现对多组元素的for循环

Eg:

<ul id="app">
<template v-for="item in list">
<li>
<span v-if="item.type">{{item.type}} | </span>
<strong>{{item.title}}</strong>
</li>
<br>
</template>
</ul>
var data = [
{
type: '湖南',
title: '快乐大本营'
},
{
type: '浙江',
title: '奔跑吧兄弟'
},
{
type: '东方',
title: '极限挑战'
}
]
var app = new Vue({
el: '#app',
data: {
list: data
}
})

3:v-show指令

v-show也是条件渲染指令,控制元素显隐,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。

V-if是false会将元素在dom文档中删除

V-show是false是将元素的display设置none

V-if会删除元素,v-show只是做样式显隐,会保留页面中

4:v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

v-else元素是否渲染在HTML中,取决于前面使用的是v-if还是v-show指令。

v-if为true,后面的v-else不会渲染到HTML;v-show为tue,但是后面的v-else渲染到HTML。

5:v-bind指令

v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class=”''

v-bind:argument="expression"

6:v-on指令

v-on指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听<a>元素的点击事件:

<a v-on:click="doSomething">

语法:V-on:click=“事件回调函数的名称”

定义事件的回调函数,在vue的实例化对象的methods属性中定义

Methods他的值是一个对象

对象是属性名称表示事件的回调函数名称

对象的属性值是一个函数,就是事件的回调函数

他的this指向的是vue实例化对象,因此通过它我们可以获取或者设置vue实例化对象上属性

它默认有个参数是事件对象,这个事件对象可以访问该事件的相关信息$event传递参数可以访问到事件对象

当我们在使用事件时候,可以传递一些参数,此时在vue的事件回调函数中它的参数与事件使用时候传入的参数是一致的

<input type="text" v-model="msg">
<button v-on:click="showTitle(msg, $event, 'hello')">btn</button>
<button v-on:click="showTitle">btn2</button>
<h1>{{title}}</h1>
var app = new Vue({
el: '#app',
data: {
title: '',
msg: ''
},
methods: {
// 属性名称表示回调函数的名称
showTitle: function () {
// console.log(this)
// console.log(arguments) 传的参数都能访问到 msg, $event, 'hello'
// 通过this访问vue实例化对象上的其他属性和方法。Data.title data.aa
this.title = '快乐大本营';
},
aa: function () {
}
}
})

总结

以上所述是小编给大家介绍的Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 #Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 #Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 #Javascript
开发用到的js封装方法(20种)
Oct 12 #Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 #Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 #Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 #Javascript
You might like
JAVA/JSP学习系列之六
2006/10/09 PHP
高亮度显示php源代码
2006/10/09 PHP
PHP文本操作类
2006/11/25 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
js的2种继承方式详解
2014/03/04 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
vue引入jq插件的实例讲解
2017/09/12 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
基督教婚礼主持词
2014/03/14 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
优秀高中学生评语
2014/12/30 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript