首页 > > 网页制作 > css >

vue属性

2018-06-24 01:31:28来源：未知阅读 ()

vue属性的绑定：

　　　我们绑定属性数据的时候有些人会这样 <img src='{{url}}'> 虽然这让也可一出来，但你打开控制台时会发现有一条404的错误。

　　　所以我们在使用vue的时候要按vue的要求来写这样<img v-bind:src='url'> 都不需要 {{}} 来写入。

　　　当然也会有简写 <img :src='url'> 这样在控制台就不会有了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<img v-bind:src='url'>  
　　　　　　　　　　　　　　 <img :src='url'>   //简写
		</div>
		
		
		
		<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#box",
				data:{
				       url:'01.png'
				},
				methods:{
					
					
				}
			})
			
		</script>
	</body>
</html>

　　　　ps:当然所有属性都可以这样写。

属性中有两个特殊的 class 和 style

　　第一种class添加方法：

　　　　　　<img :src='url' :class='[border]'> 这个数组里面的border代表了 new Vue()中写的数据，这个数据字符串可以代表

　　　　　　　　　　　　　　　　　　　　　　class名，数据和style中的class名相对应，这样不就写入了吗？多个class名只要

　　　　　　　　　　　　　　　　　　　　　　在[class1,class2,.......] 这样就可以了。

　　第二种class添加方法：

　　　　　　<img :src='url' :class={border:true}>　这个写法json中的第一个就代表了style中的class名但是只有他后面的值是‘真’

　　　　　　　　　　　　　　　　　　　　　　　　的时候执行。也就是等于 true。

　　第一种style添加方法：

　　　　　　<div :style='[a,b]'> 当然在数据中定义就不相同了。 a:{background:'red'} c:{border:'1px solid #000'}

　　　　　　　　　　　　　　　　这样就可以