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 QueryString解析类代码
Jan 17 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
js表头排序实现方法
Jan 16 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
解决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 短链接算法收集与分析
2011/12/30 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
vue中渐进过渡效果实现
2016/10/27 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
php 修改密码实现代码
2017/05/24 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
python selenium firefox使用详解
2019/02/26 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python多线程同步实例教程
2019/08/11 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
linux面试题参考答案(8)
2016/04/19 面试题
餐饮主管岗位职责
2013/12/10 职场文书
建筑学专业自荐书
2014/07/09 职场文书
八年级英语教学计划
2015/01/23 职场文书
物业公司管理制度
2015/08/05 职场文书
入党申请书怎么写?
2019/06/21 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android