vue标签的属性绑定值渲染

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue标签的属性绑定值渲染

小七呀~   2022-09-08 我要评论

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

在项目中遇到一个棘手的问题,给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使用 

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

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们