Vue.js - 属性绑定

发布时间:2018-09-05 编辑:小张个人博客 查看次数:2512

v-bind 指令

v-bind 特性被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 href 特性和 Vue 实例的 website 属性保持一致”。

<p><a v-bind:href="website"> 小张个人博客</a></p>

原始 HTML

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

  <p v-html="websiteTag">  </p>

示例

  <div class="container h">
	 <p><a v-bind:href="website">小张博客</a></p>	

	  <p v-html="websiteTag">  </p>
 </div>
var app = new Vue({
       el: '.h',
	   data: {
	       message: "你好,世界!",
		   name: "xiaozhang",
		   website:"http://www.023xs.cn",
		   websiteTag:"<a href='http://blog.023xs.cn'> v-html 指令 - 小张个人博客</a>"
	   }
   });

这个 p 的内容将会被替换成为属性值 websiteTag,直接作为 HTML——会忽略解析属性值中的数据绑定。注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面 (UI),组件更适合作为可重用和可组合的基本单位。

注意:站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。



出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号