vue笔记之v-if/v-show/绑定事件

责编:menVScode 2017-09-22 0:32 阅读(617)

v-if=""    v-else

<div id="app">
	<!-- v-if为true时,显示内容,另一个div隐藏;当v-if为false时,显示v-else的内容 -->
	<div v-if="show">menvscode.com</div>
	<div v-else>MVC前端网</div>
	<input type="checkbox" v-model="show">
</div>
new Vue({
	el:'#app',
	data:{ show:true }
});

动态效果:

GIF1111

v-if    v-else-if    v-else

name为1时,显示menvscode.com;为2时,显示MVC前端网;为其他值时,显示欢迎。

<div id="app">
	<div v-if='name==1'>menvscode.com</div>
	<div v-else-if='name==2'>MVC前端网</div>
        <div v-else>欢迎</div>
	<input type="text" v-model='name'>
</div>
new Vue({
	el:'#app',
	data:{ name : 1 }
});

动态效果:

GIF111

在其中一个input输入数据,当切换name值1、2时,用户名/密码分别渲染,但是input的值始终都是一样的。这是vue的机制,如果按上述代码去渲染的时候,input文本框是一样的话。就不会再去渲染了,直接复用。

<div id="app">
	<div v-if='name==1'>
		用户名:<input type="text">
	</div>
	<div v-else-if='name==2'>
		密码:<input type="password">
	</div>
	<div v-else>欢迎!!!</div>
	<input type="text" v-model='name'>
</div>

GIF

解决上述问题:给input用v-bind:key="",绑定一个唯一标识,渲染的时候就不会进行复用了。

<div id="app">
	<div v-if='name==1'>
		用户名:<input type="text" v-bind:key="1">
	</div>
	<div v-else-if='name==2'>
		密码:<input type="password" v-bind:key="2">
	</div>
	<div v-else>欢迎!!!</div>
	<input type="text" v-model='name'>
</div>

GIF

v-bind:key="": 对所有的标签都有用,添加一个唯一的标志,告诉vue机制渲染的时候不进行复用。也可以对此进行缩写 :key=""


v-show='':控制显示/隐藏,其值对应的是布尔类型:true表示显示,false表示隐藏,本质是通过display:none/block来控制的。

<div id="app">
	<div v-show="boolean">v-show演示</div>
	<input type="checkbox" v-model='boolean'>
</div>
new Vue({
	el:'#app',
	data:{ boolean : true }
});


v-on:绑定事件,如v-on:click=' fn() '。也支持简写:@事件名。

<div id="app">
	<p v-on:click="fn">mvc</p>
	<p @click="fn1">简写methods里面的时间函数</p>
</div>
new Vue({
	el:'#app',
	data:{ boolean : true },
	methods:{//methods里面用来写各种各样的事件函数
		fn:function(){alert('menvscode.com')},
		//里面函数也支持简写(es6)
		fn1(){
			alert('这里是简写fn1');
		}
	}
});

@事件名与v-show结合,控制显示/隐藏小例子

<div id="app">
	<div v-show="show">@事件名与v-show结合,控制显示/隐藏小例子。</div>
	<button @click="fn">按钮</button>
</div>
new Vue({
	el:'#app',
	data:{ 
		show:true
	},
	methods:{
		fn(){
			this.show = !this.show
		}
	}
});

也可以将事件过程写在@click=""中,如下:

<div id="app">
	<div v-show="show">@事件名与v-show结合,控制显示/隐藏小例子。</div>
	<button @click="show = !show">按钮</button>
</div>


vue中的this始终指向window,如果如果函数需要传入data中的属性名作为参数时。直接写其属性名即可。

<div id="app">
	<div v-show="show">@事件名与v-show结合,控制显示/隐藏小例子。</div>
	<button @click="fn(this,show,webUrl)">按钮</button>
</div>
var app = new Vue({
	el:'#app',
	data:{ 
		show:true,
		webUrl:'menvscode.com'
	},
	methods:{
		fn(){
			console.log(arguments);
		}
	}
});
标签: v-if v-show v-else
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码