先看一个简单例子：
|
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
</head>
<body >
<div id="vue-app">
<p>
<h2>属性绑定v-bind的使用</h2>
<div>
1.错误写法:
<a href="{{url}}">乐之者java</a>
</div>
<div>
2.正确写法:
<a v-bind:href="url">乐之者java</a>
</div>
</p>
<p>
<div>
1.错误写法:
{{url2}}
</div>
<div>
2.正确写法
<span v-html="url2"></span>
</div>
</p>
</div>
</body>
<script>
var options={
el:"#vue-app",
data:{
url:"http://www.roadjava.com/",
url2:"<a href='http://www.roadjava.com/'>乐之者java官网</a>"
}
}
new Vue(options);
</script>
</html>
|
执行结果：
解释：
在属性绑定的时候，我们不能像前边那样直接使用{{vue变量名}}的方式来获取属性的值，而是需要通过"v-bind:html标签属性名="vue变量名""的格式来获取。
当vue变量的值是html的时候我们通过前边“{{vue变量名}}”的格式获取的时候直接就是原样输出vue变量的值，并不进行html标签的解析，此时需要使用v-html标签来让vue解析含有html的vue变量。
