详解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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
js获取url参数的使用扩展实例
Dec 29 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 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
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php实现插入排序
2015/03/29 PHP
JavaScript 指导方针
2007/04/05 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
使用Python写一个小游戏
2018/04/02 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
小型女装店的创业计划书
2014/01/09 职场文书
经典安踏广告词
2014/03/21 职场文书
内科护士节演讲稿
2014/09/11 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
中学教师个人总结
2015/02/10 职场文书
2016年学校招生广告语
2016/01/28 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫