關(guān)于vue中標(biāo)簽的屬性綁定值渲染問題

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

這篇文章主要介紹了關(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(/&nbsp;/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+iview實現(xiàn)分頁及查詢功能
這篇文章主要為大家詳細(xì)介紹了vue+iview實現(xiàn)分頁及查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11
Vue中嵌入可浮動的第三方網(wǎng)頁窗口的示例詳解
本文介紹了在Vue2項目中嵌入可浮動的第三方網(wǎng)頁窗口的實現(xiàn)方法,包括使用iframe、div+script和dialog元素等方式,并提供了一個實戰(zhàn)Demo,展示了如何在Vue組件中動態(tài)加載和控制浮窗的顯示,需要的朋友可以參考下
2025-02-02
vue3 組合式API defineEmits() 與 emits 組
在Vue中,defineEmits()是Vue3組合式API中用于聲明自定義事件的,而emits選項則用于Vue2和Vue3的選項式API中,defineEmits()允許使用字符串?dāng)?shù)組或?qū)ο笮问铰暶魇录?emits選項也支持這兩種形式,且驗證函數(shù)可以驗證事件參數(shù),這兩種方法都是為了更規(guī)范地在組件間通信
2024-09-09
Vue 組件化基本使用詳情
這篇文章主要給大家分享的是Vue 組件化基本使用，所謂組件化，就是把頁面拆分成多個組件，每個組件依賴的 CSS、JS、模板、圖片等資源放在一起開發(fā)和維護。因為組件是資源獨立的，所以組件在系統(tǒng)內(nèi)部可復(fù)用，組件和組件之間可以嵌套，下面來看文章學(xué)習(xí)內(nèi)容吧
2021-10-10
vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法
vue3 集成 echarts 最大的坑就是出現(xiàn)了,reactive 的數(shù)據(jù) 刷新了,但圖表缺不會刷新,所以本文就給大家詳細(xì)的介紹一下vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法,需要的朋友可以參考下
2023-08-08
vuex命名空間的使用
本文主要介紹了vuex命名空間的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
基于Vue.js的表格分頁組件
這篇文章主要為大家詳細(xì)介紹了基于Vue.js的表格分頁組件使用方法，了解了Vue.js的特點，感興趣的朋友可以參考一下
2016-05-05
vue項目中axios的封裝請求
這篇文章主要介紹了vue項目中axios的封裝請求，axios?是一個輕量的HTTP客戶端，它基于?XMLHttpRequest?服務(wù)來執(zhí)行?HTTP?請求，支持豐富的配置，下文更多詳細(xì)資料,需要的朋友可以參考一下
2022-03-03
Vuex中的Mutations的具體使用方法
這篇文章主要介紹了Vuex中的Mutations的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
vue 解決IOS10低版本白屏的問題
這篇文章主要介紹了vue 解決IOS10低版本白屏的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11