Vue常用指令详解：v-if、v-for、v-show、v-else、v-bind与v-on

Vue指令概述

Vue.js的指令均以“v-”前缀开头，直接作用于HTML元素。这些指令为绑定目标元素赋予特定的行为表现，本质上可视为一种特殊的HTML属性（attribute）。

Vue.js内置了多种常用指令，具体包括下文将逐一介绍的类型。

v-if指令

v-for指令

v-show指令

v-else指令

v-bind指令

v-on指令

v-if条件渲染指令

1：v-if指令

v-if属于条件渲染指令，依据表达式的布尔值结果来决定元素的插入或删除。其基本语法格式为。

v-if="expression"

其中expression是返回布尔值的表达式，可以是布尔类型的属性，也可以是计算后返回布尔值的运算式。

示例如下：

 <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的值对应Vue实例对象中的数据属性。

Template是Vue提供的自定义元素，其内部元素根据template标签上的v-if属性控制显隐。渲染完成后，template元素本身会被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
})

v-for列表渲染指令

2：v-for指令

v-for指令用于基于数组渲染列表，其语法与JavaScript的遍历语法相似，格式为。

v-for="item in items"

此处items代表数组，item代表当前遍历到的数组元素。

示例如下：

<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元素，从而实现对多组元素的循环渲染。

示例如下：

<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
}
})

v-show与v-if的区别

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仅做样式层面的显隐切换，元素仍保留在页面中。

v-else条件分支

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为true，即使条件不满足，后续的v-else仍会渲染到HTML中。

v-bind属性绑定

5:v-bind指令

v-bind指令名称后可带参数，中间用冒号分隔，该参数通常指HTML元素的特性（attribute），例如：v-bind:class=”''。

v-bind:argument="expression"

v-on事件监听

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，希望对大家有所帮助。如有任何疑问请留言，小编会及时回复。感谢大家对本站网站的支持！