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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 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生成静态页
2006/11/25 PHP
劣质的PHP代码简化
2010/02/08 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
JS实现留言板功能
2017/06/17 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python2.7实现爬虫网页数据
2018/05/25 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
Python 实现try重新执行
2019/12/21 Python
Python实现自动装机功能案例分析
2020/10/22 Python
python中字符串的编码与解码详析
2020/12/03 Python
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
《颐和园》教学反思
2014/02/26 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
机械专业技术员求职信
2014/06/14 职场文书
买房协议书范本
2014/10/23 职场文书
公司开会通知
2015/04/20 职场文书
2015年手术室工作总结
2015/05/11 职场文书
Linux中各个目录的作用与内容
2022/06/28 Servers