关于vue中标签的属性绑定值渲染问题

更新时间：2022年06月29日 10:28:42 作者：小七呀~

这篇文章主要介绍了关于vue中标签的属性绑定值渲染问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

标签的属性绑定值渲染问题

在项目中遇到一个棘手的问题，给span标签添加title，title显示的内容就是该span标签显示的内容，且返回的内容中有html标签，需要解析出来（考虑vue的slot插槽未能实现）

最终解决办法

在绑定的title中使用过滤器，去掉内容中的标签（本项目情况特殊，返回标签固定，所以替换标签比较方便），如果大家还有其他解决办法欢迎留言~~

//template部分--使用的elementUI
 <span class="pointer" :title="scope.row[columns]['string'] | columnTitle" v-html="scope.row[columns]['string']" @click="showColumnDetail(scope.row)">
                </span>
//过滤器
filters: {
    columnTitle(content) {
      let recontent = content.replace(/&nbsp;/g,' ')
      return recontent.replaceAll("<font color=red>", "").replaceAll("</font>", "")
    }
  },

vue标签属性条件渲染

1、v-bind

v-bind可以动态绑定

<a v-bind:herf="link">to baidu</a>

可以简写为:herf

data(){
return{
link:"www.baidu.com"
}}

作用：如果link在其他地方被修改，a标签可以动态被修改，否则link只是一个字符串

ton v-on:click="additem" v-bind:class="className">additem</button>

写在data里，true就有a的样式，false则没有

 className:{
    'a':false
  },
 <button v-on:click="additem" v-bind:class="{'a':haserror}">additem</button>
  haserror:true, //true的时候有样式，false没有

数组和对象可以混用

:style="linkcss"
linkcss{
'color':'red'
}

可以设定样式

2、v-if和v-show的区别

v-if会直接从文档流删除 v-show是控制css样式的display来控制

两者都可配合v-else使用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue+iview实现分页及查询功能
这篇文章主要为大家详细介绍了vue+iview实现分页及查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
Vue中嵌入可浮动的第三方网页窗口的示例详解
本文介绍了在Vue2项目中嵌入可浮动的第三方网页窗口的实现方法,包括使用iframe、div+script和dialog元素等方式,并提供了一个实战Demo,展示了如何在Vue组件中动态加载和控制浮窗的显示,需要的朋友可以参考下
2025-02-02
vue3 组合式API defineEmits() 与 emits 组
在Vue中,defineEmits()是Vue3组合式API中用于声明自定义事件的,而emits选项则用于Vue2和Vue3的选项式API中,defineEmits()允许使用字符串数组或对象形式声明事件,emits选项也支持这两种形式,且验证函数可以验证事件参数,这两种方法都是为了更规范地在组件间通信
2024-09-09
Vue 组件化基本使用详情
这篇文章主要给大家分享的是Vue 组件化基本使用，所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，下面来看文章学习内容吧
2021-10-10
vue3集成echarts数据刷新后图表不刷新的解决方法
vue3 集成 echarts 最大的坑就是出现了,reactive 的数据刷新了,但图表缺不会刷新,所以本文就给大家详细的介绍一下vue3集成echarts数据刷新后图表不刷新的解决方法,需要的朋友可以参考下
2023-08-08
vuex命名空间的使用
本文主要介绍了vuex命名空间的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
基于Vue.js的表格分页组件
这篇文章主要为大家详细介绍了基于Vue.js的表格分页组件使用方法，了解了Vue.js的特点，感兴趣的朋友可以参考一下
2016-05-05
vue项目中axios的封装请求
这篇文章主要介绍了vue项目中axios的封装请求，axios 是一个轻量的HTTP客户端，它基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，下文更多详细资料,需要的朋友可以参考一下
2022-03-03
Vuex中的Mutations的具体使用方法
这篇文章主要介绍了Vuex中的Mutations的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue 解决IOS10低版本白屏的问题
这篇文章主要介绍了vue 解决IOS10低版本白屏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11