先看一个简单例子:
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变量。