Vue:v-text、v-html指令
来自CloudWiki
概述
v-text、v-html这两者分为一组很好理解,一个用于绑定文本,一个用于绑定html。上文使用到的 {{ Name }}这种写法就是v-text的的缩写形式。这个很简单,没什么好纠结的,看一个Demo就能明白。
示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head> <body> <div id="app"> <h1>姓名:<label v-text="Name"></label></h1> <h1>姓名:{{ Name }}</h1> <div style="font-size:30px;font-weight:bold;" v-html="Age">年龄:</div> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', Age: "<label>20</label>", School:'光明小学', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body> </html>
代码说明
代码说明:
- {{Name}}这种写法和v-text的作用是相同的,用于绑定标签的text属性。注意如果标签没有text属性,该绑定会失效,比如你在一个文本框上面使用v-text是没有效果的
- 由得到的效果可以看出,v-html绑定后会覆盖原来标签里面的内容(比如上面的“年龄:”),记住此处是覆盖而非append。
- 对于v-html应用的时候要慎重,在网站上动态渲染任意 HTML 有一定的危险存在,因为容易导致 XSS 跨站脚本攻击。所以最好是在信任的网址上面使用。
- 注意v-text和v-html绑定都是单向的,只能从Model到View的绑定,不能实现View到Model的更新。