关于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(/ /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中el-date-picker选择日期的限制的项目实践
ElementUI的el-date-picker使用时,有时候想要限制用户选择的时间范围,本文就来介绍了vue中el-date-picker选择日期的限制的项目实践,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了vue中的@click.native 原生点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue服务端渲染实践之Web应用首屏耗时最优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了如何管理Vue中的缓存页面，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了Vue如何获取下拉框中选中的value值和label值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
父子组件通信是Vue中常见的场景,这篇文章主要为大家详细介绍了vue中父子组件相互传值的实现方法,文中的示例代码讲解详细,需要的小伙伴可以参考一下2023-12-12
Vue.js中this如何取到data和method里的属性详解
methods属性是一个对象,通常我们会在这个对象中定义很多的方法,下面这篇文章主要给大家介绍了关于Vue.js中this如何取到data和method里的属性,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue实现行列转换的一种方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
Vuejs使用addEventListener的事件如何触发执行函数的this
这篇文章主要介绍了Vuejs使用addEventListener的事件触发执行函数的this方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了深入探索VueJS Scoped CSS 实现原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论