web前端vue实现插值文本和输出原始html
更新时间：2018年01月19日 08:45:14 作者：奇惠小前端
这篇文章主要介绍了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 插值， 绝不要 对用户提供的内容使用插值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近搭建一个Springboot+vue前后端分离项目,真的很简单,下面这篇文章主要给大家介绍了关于如何在Vue和Spring boot之间实现前后端连接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
elementplus el-table(行列互换)转置的两种方法
本文主要介绍了elementplus el-table(行列互换)转置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
在Vue.js项目中,构建后的资源文件（如CSS、JavaScript文件、图片等）通常会被放置在指定的目录下,为了确保这些文件能够被正确加载,Vue CLI 提供了配置选项来指定这些文件的路径,本文给大家介绍了Vue打包为相对路径的具体实现方法,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue手把手教你撸一个 beforeEnter 钩子函数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了Vue传参一箩筐(页面、组件)，Vue页面、组件之间传参方式繁多，此处罗列出常用的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
解决router.beforeEach()动态加载路由出现死循环问题
这篇文章主要介绍了解决router.beforeEach()动态加载路由出现死循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue 重置组件到初始状态的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本篇文章主要介绍了vue-cli中的webpack配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Vue实现Hover功能(mouseover与mouseenter的区别及说明)
这篇文章主要介绍了Vue实现Hover功能(mouseover与mouseenter的区别及说明)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在Vue中，组件是构建页面的基本单位。通过组件化开发，可以提高代码的复用性和可维护性。组件的注册方法包括全局注册和局部注册两种方式。同时，需要注意组件名的命名规范、组件选项的定义方式、组件之间的通信等问题，以实现更好的组件复用和开发效率2023-05-05
最新评论