vue指令-v-text和v-html

这篇具有很好参考价值的文章主要介绍了vue指令-v-text和v-html。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、目标

更新DOM对象的innerText/innerHTML

2、语法

v-text=“Vue数据变量"
v-html=“Vue数据变量"

注意:会覆盖插值表达式

示例:文章来源地址https://www.toymoban.com/news/detail-614011.html

<template>
  <div id="app">
    <div>
     <p v-text="str"></p>
     <p v-html="str"></p>
    </div>
   
    
  </div>
  
</template>

<script>


export default {
  data(){
    return{
      
      str:"<span>我是一个span</span>"
      
    }
    
  },
  
  
  
  
}
</script>

到了这里,关于vue指令-v-text和v-html的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue中v-html用法以及指令汇总

    操作数组的方法 : push:数组最后位置新增元素 pop:  删除最后一个元素 shift:  删除第一个元素 unshift:往前面加一个元素 splice:在数组的指定位置插入、删除、替换一个元素 sort:    数组排序 reverse:反转数组 我们学过的指令:     v-bind  : 单向绑定解析表达式,可简

    2024年02月16日
    浏览(46)
  • 【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行

    最近开发vue2 项目 ,接口返回的是类似于这样的数据: 我是第一行的哦n我是第二行的哦 我是直接这样渲染的, 但结果却是不如意,变成了下面这样 1.在使用 v-html 时添加样式,white-space:pre-wrap ,让浏览器保留空白和换行符。 2、用 pre 标签包裹 被包围在 pre 标签中的文本通常

    2024年02月14日
    浏览(36)
  • ant-design-vue中table组件使用customRender渲染v-html

    ant-design-vue遇到table中列表数据需要高亮渲染 1、customRender可以使用,但是使用v-html发现不生效还报错 2、customRender函数返回肯定是jsx语法,于是发现这样写可以

    2024年02月15日
    浏览(49)
  • v-html 绑定事件

    把点击事件函数挂在在window下面

    2024年02月03日
    浏览(40)
  • 报错:v-html will override element children 解决方法

    原因: v-html 标签内还有内容 解决方法:删除标签内的内容,如下

    2024年02月13日
    浏览(39)
  • 怎么将拼接的字符串element组件通过“v-html“渲染到页面

    如上图所示,没那么多废话,直接上代码 html中 vue中

    2024年02月16日
    浏览(46)
  • React V6实现v-if、v-show、v-html

    功能背景 在vue中使用v-if、v-show、v-html这些命令得心应手,那么react是否也存在这样的命令呢?似乎是没有的,需要自己实现,也就是用原生的写法直接控制dom。 实际效果 代码实现

    2024年02月11日
    浏览(37)
  • 使用v-html进行渲染如何使标签按照字符串显示,特殊样式标签(自己添加的部分)按照标签解析

    使用v-html进行渲染如何使标签按照字符串显示,特殊样式标签(自己添加的部分)按照标签解析 需求:是内容里如果含有含有www.baidu.com这种链接高亮显示 解决办法: 首先拿到需要回显的内容content对内容进行转义escapeHTML,之后再去判断是否是链接进行高亮添加 代码如下

    2024年02月16日
    浏览(41)
  • vue基础指令2

    v-if指令的作用是:根据表达式的真假切换元素的显示状态 v-bind指令的作用是为元素绑定属性 v-for指令的作用是:根据数据生成列表结构 v-model指令的作用是便捷的设置和获取表单元素的值

    2024年02月16日
    浏览(16)
  • 前端学习--vue2--2--vue指令基础

    写在前面: 前置内容 - vue配置 vue指令只的是带有v-前缀的特殊标签属性 插值表达式{{}}是一种vue模板语法。 利用表达式进行差值,渲染到页面。 表达式可以是被求值的代码,js会计算 不能用差值表达式的 不存在的数据 {{data里面不存在的字段 js {{if}} 标签属性 span id=“

    2024年02月14日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包