web前端vue实现插值文本和输出原始html

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 插值， 绝不要 对用户提供的内容使用插值。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue模板语法-插值详解
赞 (0)

相关推荐

  • vue模板语法-插值详解

    1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使

  • web前端vue实现插值文本和输出原始html

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在vue里最常见的数据绑定是使用"Mustache"语法 (双大括号) 的文本插值: <span>Message: {{ value }}</span> // 插值文本 无论何时,绑定的数据对象上 value 属性发生了改变,页面上都会响应的做出重新渲染

  • web前端vue之vuex单独一文件使用方式实例详解

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用.上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个

  • web前端vue filter 过滤器

    vue的过滤器通常用在一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind 表达式. 比如给价格自动加上中文的钱的字符"￥"或者是给一个时间段或(时间戳)相互之间的转换过滤. 在javascript和jquery的年代!时间段的显示或者是提交,都是要在显示的时候要转换下或者提交的时候转换下,这样就有点繁琐了(个人用了vue后的感觉繁琐了). 不多说直接看例子如下: filter定义的过滤器可以局部,可以全局的下面就直接说全局的 老样子还是等先注册一个全局的过滤器关

  • web前端vue之CSS过渡效果示例

    过渡效果在交互体验中的重要性不言而喻.以往我们使用js或Jquery添加或移除元素的类(class),搭配CSS中定义好的样式,再引用一些javascript库之后,可以做作出非常复杂,惊艳的动态效果,不过这套方法还是太繁琐. vue.js内置了一套过渡系统,可以在元素从DOM中插入或移除时自动应用过渡效果.vue会在是党的时机触发css过渡或者动画,你也可以提供相应的javascript钩子函数在过渡过程中执行自定义的DOM操作. 每个过渡效果,都需要在目标元素上使用transition特性.

  • vue实现web前端登录页数字验证码

    vue实现web前端登录页数字验证码

    本文实例为大家分享了vue实现web前端登录页数字验证码的具体代码,供大家参考,具体内容如下 1.创建code.js文件夹下面是js代码 function GVerify(options) {     console.log(); // 创建一个图形验证码对象,接收options对象为参数     this.con = document.getElementById(options)     this.options = { // 默认options参数值         id: '', //

  • jQuery会死吗?我为什么不用vue写富文本

    一.事件背景: 我最近开源了一个个人耗时半年打造的富文本及一套适用于web后台的ui框架,在gitee上受到网友们的关注,部分网友对我采用jquery的技术栈提出了质疑.总结起来:无非是jquery已经落后,不久将死.甚至有少数网友很激进:非vue技术栈,你不应该加入我这个群,不管你做得多好.对应这个事情,首先我一般不反驳,因为我对vue,jquery有自己的应用场景度量.但是对于这种不分场景应用而盲目赶潮流的观点,我是持否定态度的. 为此我想有必要通过这篇文章,说明一下:我为什么用jquery

  • Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

    原始 HTML(Raw HTML) 双花括号语法,会将数据中的 HTML 转为纯文本后再进行插值.为了输出真正的 HTML,你需要使用 v-html 指令: <p>使用双花括号语法:{{ rawHtml }}</p> <p>使用 v-html 指令:<span v-html="rawHtml"></span></p> 使用双花括号语法:<span style="color: red">

  • WEB前端性能优化的7大手段详解

    减少请求数量 合并 如果不进行文件合并,有如下3个隐患 1.文件与文件之间有插入的上行请求,增加了N-1个网络延迟 2.受丢包问题影响更严重 3.经过代理服务器时可能会被断开 但是,文件合并本身也有自己的问题 1.首屏渲染问题 2.缓存失效问题 所以,对于文件合并,有如下改进建议 1.公共库合并 2.不同页面单独合并 图片处理 1.雪碧图 CSS雪碧图是以前非常流行的技术,把网站上的一些图片整合到一张单独的图片中,可以减少网站的HTTP请求数量,但是当整合图片比较大时,一次加载比较慢.随着字体图

  • 前端vue如何使用高德地图

    首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 然后,书写代码 在vuecli  public文件夹中的index.html添加导入 JS API 的入口脚本标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8

  • 前端Vue单元测试入门教程

    目录 一.为什么需要单元测试 二.如何写单元测试 三.测试工具 四.Jest入门 安装 简单示例 Jest Cli 使用配置文件 使用 Babel vue-cli 中使用 Jest 常见示例 判断值相等 检查类false值 数字大小比较 字符串比较 数组和类数组 异常 只执行当前test 测试异步代码 回调函数 Promises Async/Await 安装和拆卸 测试前和测试后 测试用例分组 执行顺序 mock 函数 测试mock mock的返回值 模拟接口返回 mock函数的匹配器 五.Vu

随机推荐