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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
javascript中this关键字详解
Dec 12 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
javascript触发模拟鼠标点击事件
Jun 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
php注销代码(session注销)
2012/05/31 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
用cssText批量修改样式
2009/08/29 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
深入解析Python中的WSGI接口
2015/05/11 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
彻底理解Python中的yield关键字
2019/04/01 Python
pandas中的series数据类型详解
2019/07/06 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
五种Python转义表示法
2020/11/27 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
总裁岗位职责
2013/12/04 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
教师开学感言
2014/02/14 职场文书
火灾现场处置方案
2014/05/28 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python