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下利用jsonp跨域访问实现方法
Jul 29 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
jquery实现pager控件示例
Apr 09 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 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 动态添加记录
2009/03/10 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
初识Laravel
2014/10/30 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python解惑之True和False详解
2017/04/24 Python
python实现二维数组的对角线遍历
2019/03/02 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
软件工程师面试题
2012/06/25 面试题
应届毕业生的自我鉴定
2013/11/13 职场文书
销售督导岗位职责
2015/04/10 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
MySQL触发器的使用
2021/05/24 MySQL