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 相关文章推荐
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
ES6的循环与可迭代对象示例详解
Jan 31 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
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
php 可变函数使用小结
2018/06/12 PHP
深入分析jquery解析json数据
2014/12/09 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
Python如何实现机器人聊天
2020/09/10 Python
java关于string最常出现的面试题整理
2021/01/18 Python
计算机专业自我鉴定
2013/10/15 职场文书
人事助理自荐信
2014/02/02 职场文书
工地质量标语
2014/06/12 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
大学生赌博检讨书
2014/09/22 职场文书
农业项目投资意向书
2015/05/09 职场文书
竞选稿之小学班干部
2019/10/31 职场文书