v-指令 v-if v-else v-show v-for v-on

1.v-if/v-else

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。v-else必须跟着v-if，充当else功能。

<div id="example">
		<p v-if="greeting">Hello</p>
		<p v-else="greeting">Hi</p>
		<template v-if="ok">
			<h1>Tiele</h1>
			<p>Paragraph</p>
		</template>
</div>

var exampleVM2=new Vue({
			el: '#example',
			data: {
				greeting: false,
				ok: true,
			}
		})

可以看到包装元素<template>最终是不会渲染出来，它可以用来包装多个需要切换元素。而else内容最终也不会渲染到DOM中

2.v-show

v-show指令是根据表达式的值来显示或者隐藏HTML元素内容的。

<div id="example2">
			<p v-show="greeting">Hello!</p>
			<p v-show="!greeting">Hi</p>
</div>

var example=new Vue({
			el: '#example2',
			data: {
				greeting: true
				
			}
		})

将v-show用在指令上时，因为指令的优先级v-else会出现问题，所以可以通过用另一个v-show指令代替v-else，如上。

一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁的切换，则使用v-show较好；如果运行时条件不大可能改变，则使用v-if较好

3.v-for

我们可以使用v-for指令基于源数据重复渲染元素

<div id="demo">
		<ul>
			<li v-for="item in items" class="item-{{$index}}">
				{{$index}} -{{parentMessage}} {{item.msg}}
			</li>
		</ul>
	</div>

var demo= new Vue({
			el: '#demo',
			data: {
				parentMessage: '滴滴',
				items:[
                   {msg: '顺风车'},
                   {msg: '专车'}
				]

			}
		})

$index可以用来呈现相应的数组索引，注意需要最新版本的Vue才有此功能。

4.v-on

v-on指令用于绑定事件监听器。

v-on后面不仅可以跟参数，还可以增加修饰符：

.stop -----调用event.stopPropagation()，停止冒泡

.prevent-----调用event.preventFefault()，阻止默认行为

.capture-----添加事件监听器时使用capture模式

.self------只当时间是从监听器绑定的元素本身触发时才触发回调

<div id="example">
		<button @click="toggleShow">{{msg}}</button>
        <p v-if="showTotal">显示</p>
</div>

	var demo=new Vue({
			el: "#example",
			data: {
				showTotal:true,
				msg:'点击显示与隐藏'
			},
			methods:{
				toggleShow:function(){
					this.showTotal=!this.showTotal
				}
			}
		})

v-on：可以简写为@

v-指令 v-if v-else v-show v-for v-on

猜你喜欢