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 同时提交多个Web表单的方法
Feb 19 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
JavaScript实现动态生成表格
Aug 02 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
PHP之短标签开启设置
2013/06/17 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
基于jquery实现的自动补全功能
2015/03/12 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python中Switch/Case实现的示例代码
2017/11/09 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
基于python实现KNN分类算法
2020/04/23 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python super()函数的基本使用
2020/09/10 Python
Python图像读写方法对比
2020/11/16 Python
党员先进性教育整改措施
2014/09/18 职场文书
出差报告怎么写
2014/11/06 职场文书
试用期辞职信范文
2015/03/02 职场文书
台风停课通知
2015/04/24 职场文书
催款函怎么写
2015/06/24 职场文书
《静夜思》教学反思
2016/02/17 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
mysql幻读详解实例以及解决办法
2022/06/16 MySQL