shangrila-xiu

112
文章
101
分类
33
标签

v-bind属性

v-bind:src=”url”属性

我就直接给代码了。。。。。。

我们在将图片加载到页面中，平常我们并没有发现控制台报错，今天我就可以告诉你，架子啊图片也会报错的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div class="img">
			<img src="{{url}}" alt="风景图" title="山高"/>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'.img',
					data:{
						url:'http://img0.imgtn.bdimg.com/it/u=2756744720,2526594572&fm=200&gp=0.jpg'
					},
					methods:{}
				});
			};
		</script>
	</body>
</html>
虽然可以看到结果，但是打开控制台看就报错了：看下图

img

我们的解决方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-bind:属性</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div class="img">
			<img v-bind:src="url" alt="风景图" title="山高"/>
			<!--简写-->
			<!--<img :src="url" alt="风景图" title="山高"/>-->
			</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'.img',
					data:{
						url:'http://img0.imgtn.bdimg.com/it/u=2756744720,2526594572&fm=200&gp=0.jpg'
					},
					methods:{}
				});
			};
		</script>
	</body>
</html>
给你们看一张图吧，很明显的：

img

v-bind:src=”url”的简写

1
:src="url"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-bind:属性</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div class="img">
			<img v-bind:src="url" alt="风景图" title="山高"/>
			<!--简写-->
			<img :src="url" alt="风景图" title="山高"/>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'.img',
					data:{
						url:'http://img0.imgtn.bdimg.com/it/u=2756744720,2526594572&fm=200&gp=0.jpg'
					},
					methods:{}
				});
			};
		</script>
	</body>
</html>

改变图片的其他属性的方法也是——–> :属性名=”属性”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-bind:属性</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div class="img">
			<img v-bind:src="url" alt="风景图" title="山高"/>
			<!--简写-->
			<img :src="url" alt="风景图" title="山高" :width="w"/>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'.img',
					data:{
						url:'http://img0.imgtn.bdimg.com/it/u=2756744720,2526594572&fm=200&gp=0.jpg',
						w:'200px'
					},
					methods:{}
				});
			};
		</script>
	</body>
</html>

效果图前后对比如下:

1：

https://github.com/shangrila-xiu/IMG/raw/master/shuxing1.png

2：

https://github.com/shangrila-xiu/IMG/raw/master/shuxing2.png