vue中带v-的前缀指令

最新推荐文章于 2024-05-08 00:45:20 发布

weixin_43845488

最新推荐文章于 2024-05-08 00:45:20 发布

阅读量992

点赞数

本文链接：https://blog.csdn.net/weixin_43845488/article/details/89285661

版权

vue中带v-的前缀指令

v-html
v-bind
v-on事件绑定
v-model
v-if
v-else v-else-if
v-show
v-for

v-html

v-html与创建的Vue中的data数据进行绑定，代替或改变某个节点的innerHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue-demo01</title>
		<script src='../../vue.min.js'></script>
	</head>
	<body>
		<div id='root' v-html='msg'>
			'hello world1'
		</div>
	</body>
	<script>
		new Vue({
			el:'#root',
			data:{
				msg:'hello world2'
			}
		})
	</script>
</html>
//在浏览器中显示hello world2

若msg的值为html标签，如下：
则显示大号字体的hello world2

data:{
	msg:'<h1>hello world2</h1>'
}

v-html与{{}}的区别

<body>
		<div id='root'>
			{{msg}}
		</div>
</body>
<script>
		new Vue({
			el:'#root',
			data:{
				msg:'<h1>hello world2</h1>'
			}
		})
</script>

在浏览器上显示：

v-html 和{{}}同时出现 v-html的优先级高

<body>
		<div id='root' v-html='msg'>{{msg}}</div>
</body>
<script>
		new Vue({
			el:'#root',
			data:{
				msg:'<h1>hello world2</h1>'
			}
		})
</script>

在浏览器上显示：
在这里插入图片描述

v-bind

v-bind用于绑定元素属性的值，如id，class，href等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue-demo02</title>
		<style>
			.class1{
				background: red;
			}
		</style>
		<script src='../../vue.min.js'></script>
	</head>
	<body>
		<div id='root' v-bind:class="{'class1':use}" >
			{{msg}}<br/>
			<a  v-bind:href='url'>CSDN</a>
			<p v-bind:id="'p'+id">abc</p>
		</div>
	</body>
	<script>
		new Vue({
			el:'#root',
			data:{
				msg:'hello world',
				use:true,
				url:'https://www.csdn.net/',
				id:1
			}
		})
		console.log(document.getElementById('p1').innerHTML) //输出abc
	</script>
</html>

v-bind可缩写

<div id='root'  :class="{'class1':use}" >

效果：
在这里插入图片描述
一个标签里可出现多个v-bind

<a  v-bind:href='url' v-bind:id="'a'+id">CSDN</a>

v-on事件绑定

<body>
		<div id='root' v-bind:class="{'class1':use}" v-on:click="change">
			{{msg}}
		</div>
</body>
<script>
		var vue=new Vue({
			el:'#root',
			data:{
				msg:'hello world',
				use:true,
			},
			methods:{
				change:function(){
					vue.use=!vue.use 
				}
			}
		});
</script>

v-on可缩写：

 <div @click="change"></div>

以特殊的形式绑定事件小数点：.
如下：.prevent就告诉v-on在触发click事件的时候，调用event.preventDefualt()方法

<form v-on:click.prevent="doSomething"></form>

v-model

和Ionic和Angular中的ng-model功能一样，在input，select中实现双向数据绑定

<body>
		<div id='root'>
			{{msg}}<br/>//此处msg 会随着input中的值而变化
			<input type='text' v-model='msg'/>
		</div>
</body>
<script>
		var vue=new Vue({
			el:'#root',
			data:{
				msg:'hello world',
			}
		});
</script>

v-if

v-if让某个元素是否显示出来，false时，相当于移除指定元素以及所占空间被回收，
注意：必须为节点创建一个Vue对象，节点及其后代才能使用v-指令

<body>//把下一行div的id='root'移至body中，其后的v-指令都会失效
		<div id='root' >
			<p v-if='show'>{{msg}}</p>
			<div v-on:click="isShow">show</div>
		</div>
</body>
<script>
		var vue=new Vue({
			el:'#root',
			data:{
				msg:'hello world',
				show:true,
			}
		});
		function isShow(){
			console.log(vue.show);
			vue.show=!vue.show
		}
	</script>

v-else v-else-if

<body>
		<div id='root'> 
			<input type='text' v-model="id">
		    <ul>
			   <li v-if='id==1'>1</li>
			   <li v-else-if='id==2'>2</li>
			   <li v-else-if='id==3'>3</li>
			   <p v-else>无</p>
		    </ul>
		</div>
</body>
<script>
		var vue=new Vue({
			el:'#root',
			data:{
				id:1
			},
		});
</script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

当v-show的值为true，元素的display:block，当为false是display变为none

<div  v-show="false"></div>

v-for

<body>
		<div id='root'> 
			<ul>
				<li v-for='item in obj'>
					{{item.name}}的年龄是{{item.age}}
				</li>
			</ul>
		</div>
</body>
<script>
		var vue=new Vue({
			el:'#root',
			data:{
				obj:[{name:'a',age:10},{name:'b',age:12}]
			},
		});
</script>

weixin_43845488

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中带v-的前缀指令

vue中带v-的前缀指令v-htmlv-bindv-on事件绑定v-modelv-ifv-else v-else-ifv-htmlv-html与创建的Vue中的data数据进行绑定，代替或改变某个节点的innerHTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> &lt...
复制链接

扫一扫