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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值