web前端vue实现插值文本和输出原始html


Posted in Javascript onJanuary 19, 2018

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

在vue里最常见的数据绑定是使用“Mustache”语法 (双大括号) 的文本插值:

<span>Message: {{ value }}</span> // 插值文本

无论何时,绑定的数据对象上 value 属性发生了改变,页面上都会响应的做出重新渲染。

或者有时候只是想更新一次,不想每次都更新数据了页面也重新渲染,可以通过 v-once指令也能实现一次性的更新:

<span v-once>这个将不会改变: {{ value }}</span> 
// value的值改变了一次后,第二次改变时就不会再重新渲染页面

有时候你插入的不是单单一个文本时,比如一个富文本的值时,它包含了各种文本值和各种原始的html的标签,要完整的显示到页面上,就得使用v-html的指令:

<template>
 <div v-html="htmlvalue"></div> // 调用显示富文本,将会按照原始的html显示
</template>
<script>
export default {
 data(){
 return{
  htmlvalue: '<span style="color:red;">the should be red</span>' // 比如:这是一个富文本的值
 }
 }
}
</script>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JS的数组迭代方法
Feb 05 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
Node学习记录之cluster模块
May 31 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 #Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
解决js ajax同步请求造成浏览器假死的问题
Jan 18 #Javascript
js实时监控文本框输入字数的实例代码
Jan 18 #Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 #Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 #Javascript
分享ES6的7个实用技巧
Jan 18 #Javascript
You might like
深入PHP5中的魔术方法详解
2013/06/17 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
node中socket.io的事件使用详解
2014/12/15 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
python简单实现获取当前时间
2016/08/27 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Django 内置权限扩展案例详解
2019/03/04 Python
python getpass实现密文实例详解
2019/09/24 Python
wxPython实现分隔窗口
2019/11/19 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
一道输出判断型Java面试题
2014/10/01 面试题
大学生实习思想汇报
2014/01/12 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
大学生工作求职信
2014/06/23 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
消防演习通知
2015/04/25 职场文书
八月一日观后感
2015/06/10 职场文书
独生子女证明范本
2015/06/19 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python