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 相关文章推荐
javascript闭包的理解和实例
Aug 12 Javascript
javascript整除实现代码
Nov 23 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
destoon复制新模块的方法
2014/06/21 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
详解 javascript对象创建模式
2020/10/30 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
python删除过期文件的方法
2015/05/29 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
HTML的form表单和django的form表单
2019/07/25 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
详解Python 中的容器 collections
2020/08/17 Python
html5唤起app的方法
2017/11/30 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
高考寄语大全
2014/04/08 职场文书
公司联欢会策划方案
2014/05/19 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL