vue属性

最新推荐文章于 2024-06-21 10:23:19 发布

dibiedang8152

最新推荐文章于 2024-06-21 10:23:19 发布

阅读量70

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/durenlong/p/7081492.html

版权

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在放入　　　　

转载于:https://www.cnblogs.com/durenlong/p/7081492.html

dibiedang8152

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue属性

vue属性的绑定：　　　我们绑定属性数据的时候有些人会这样 <img src='{{url}}'> 虽然这让也可一出来，但你打开控制台时会发现有一条404的错误。　　　所以我们在使用vue的时候要按vue的要求来写这样<img v-bind:src='url'> 都不需要 {{}} 来写入。　　　当然也会有简写 <img :src...
复制链接

扫一扫

vue属性

“相关推荐”对你有帮助么？