vue属性

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'}

　　　　　　　　　　　　　　　　这样就可以

　　第二种方法：

　　　　　　<div  :style='{background:"red",border:"1px solid #000"}'>　 json这样就可以当然你也可以数据中写个json在放入　　　　

 

　

posted @ 2017-06-26 20:05  当年华褪去生涩  阅读(310)  评论(0)  编辑  收藏  举报