vue 基础入门之指令

vue中的指令指的是带有v-为前缀的，它作用于HTML元素，为我们提供了一些特殊的特性，当我们将指令绑定在元素上时，指令会帮助我们给目标元素添加一些特殊的行为。

下面介绍一下vue常用的内置指令：

v-if指令

v-if是用来条件渲染指令，它根据表达式的真假来删除和添加插入元素

基本语法：v-if="XX"

XX是一个返回布尔值的表达式，可以是一个布尔属性，也可以是一个返回布尔的运算式

<div id=#app>
 <div v-if="isGender">
先生
 </div>
 <div v-if="age>18">
age：{{age}}
 </div>

</div>

<script>
  export default {
data(){
isGender：true,
age:30
}
}
</script>

v-show指令

v-show和v-if使用后效果是一样的，区别是v-show不管条件是否成立，都会渲染html，而v-if只有条件成立才会渲染

v-show条件不成立时，仅仅只是改变的它的样式display：none

v-for

v-for指令相当于用一个数组去渲染列表

基本语法：v-for="item in list" :key="item.name"&&v-for="（item,index） in list" :key="item.name"

list是一个数组，item相当于数组的元素，index是当前循环的索引，从下标0开始

 <div
            v-for="(item,index) in list"
            :key="item.name"
          >
            <span >每一项：{{ item }}------索引：{{index}}</span>
          </div>

<script>
  export default {
data(){
list:[1,2]
}
}
</script>

使用v-for指令的时候，要使用：key，在一些特殊情况中，如果v-for有问题，必须指定唯一的key值

v-bind指令

v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名

<div id="app">
			<img v-bind:src="img" class="logo" 
				v-bind:class="isLogo?'':'product'" 
				v-bind:style="{'border':hasBorder?'2px solid red':''}"></img>
		</div>
		

以上v-bind:src也可简写成:src,修改上面代码

<div id="app">
			<img :src="img" class="logo" 
				:class="isLogo?'':'product'" 
				:style="{'border':hasBorder?'2px solid red':''}"></img>
		</div>

v-on指令

v-on用于监听DOM事件,用法和v-bind类似，例如给button添加点击事件
<button v-on:click="show">
同样，和v-bind一样，v-on也可以使用简写，用@符号代替，修改代码：
<button @click="show">

下面是点击显示和隐藏一段话

<div id="app">
			<p v-show="isShow">hi，我出来了</p>
			<div>
				<button type="button" v-on:click="show(1)">显示</button>
				<button type="button" v-on:click="show(0)">隐藏</button>
			</div>
		</div>
<script>
export default {
data(){
list:[1,2]
}
}
methods:{
  show:function(type){
	if(type){
	this.isShow = true;
	}else{
	this.isShow = false;
	}
	}
	}

</script>