关于vue中标签的属性绑定值渲染问题
短信预约 -IT技能 免费直播动态提醒
标签的属性绑定值渲染问题
在项目中遇到一个棘手的问题，给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使用
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
