關(guān)于vue中標(biāo)簽的屬性綁定值渲染問題
標(biāo)簽的屬性綁定值渲染問題
在項目中遇到一個棘手的問題,給span標(biāo)簽添加title,title顯示的內(nèi)容就是該span標(biāo)簽顯示的內(nèi)容,且返回的內(nèi)容中有html標(biāo)簽,需要解析出來(考慮vue的slot插槽未能實現(xiàn))
最終解決辦法
在綁定的title中使用過濾器,去掉內(nèi)容中的標(biāo)簽(本項目情況特殊,返回標(biāo)簽固定,所以替換標(biāo)簽比較方便),如果大家還有其他解決辦法歡迎留言~~
//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標(biāo)簽屬性條件渲染
1、v-bind
v-bind可以動態(tài)綁定
<a v-bind:herf="link">to baidu</a>
可以簡寫為:herf
data(){ return{ link:"www.baidu.com" }}
作用:如果link在其他地方被修改,a標(biāo)簽可以動態(tài)被修改,否則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沒有
數(shù)組和對象可以混用
:style="linkcss" linkcss{ 'color':'red' }
可以設(shè)定樣式
2、v-if和v-show的區(qū)別
v-if會直接從文檔流刪除 v-show是控制css樣式的display來控制
兩者都可配合v-else使用
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue踩坑記之npm?install報錯問題解決總結(jié)
當(dāng)你跑起一個項目的時候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于vue踩坑之npm?install報錯問題解決的相關(guān)資料,需要的朋友可以參考下2022-06-06基于vue+face-api.js實現(xiàn)前端人臉識別功能
基于face-api.js要實現(xiàn)人臉識別功能,首先要將自己需要的模型文件下載保存在靜態(tài)目錄下,可以通過cdn的方式在index.html中引入face-api.js,本文給大家介紹vue+face-api.js實現(xiàn)前端人臉識別功能,感興趣的朋友一起看看吧2023-12-12Vue中對拿到的數(shù)據(jù)進(jìn)行A-Z排序的實例
今天小編就為大家分享一篇Vue中對拿到的數(shù)據(jù)進(jìn)行A-Z排序的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue+element模態(tài)框中新增模態(tài)框和刪除功能
這篇文章主要介紹了vue+element模態(tài)框中新增模態(tài)框和刪除功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06