vue實現(xiàn)修改標(biāo)簽中的內(nèi)容:id class style
更新時間：2022年07月02日 15:52:32 作者：kxukai
這篇文章主要介紹了vue實現(xiàn)修改標(biāo)簽中的內(nèi)容：id class style，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue修改標(biāo)簽的內(nèi)容:id class style
v-bind,v-model注意
v-bind動態(tài)綁定指令，默認(rèn)情況下標(biāo)簽自帶屬性的值是固定的，在為了能夠動態(tài)的給這些屬性添加值，可以使用v-bind:你要動態(tài)變化的值=“表達(dá)式”v-bind用于綁定屬性和數(shù)據(jù) ，其縮寫為“ : ” 也就是v-bind:id === :idv-model用在表單控件上的，用于實現(xiàn)雙向數(shù)據(jù)綁定，所以如果你用在除了表單控件以外的標(biāo)簽是沒有任何效果的。
Mustache (雙大括號寫法)不能在 HTML 屬性中使用，應(yīng)使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
這對布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬性會被移除：
<button v-bind:disabled="someDynamicCondition">Button</button>
<p :[list]="demo()">{{demo()}}</p>
el: '#example',
data: {
id: 1,
list: 'class'
},
methods:{
demo(){
return 'a';
}
}
動態(tài)改變class和style的一些方法
:class="{'class1':'true'=='true',class2:status=='status'}"這句話的意思是，class1和class2都是兩個樣式，但是class1是必須存在的，class2是要根據(jù)data里面的status的狀態(tài)來決定是否存在的，class1必須存在，之前試過很多種方法，都不能正確顯示，所以我就強(qiáng)制加了一個判斷條件：true==true，然后后面的是動態(tài)綁定內(nèi)容（動態(tài)綁定）
ref="one"
對于想改變的地方綁定一個ref，讓參數(shù)按照引用傳遞
然后可以在下面的函數(shù)中來改變，例如：
this.$refs.one.style.border = "1px solid red";
使用$event
在需要改變的地方，加入$event參數(shù)（如果只有一個不加也可以），例如：
@click="changeClass($event)"
下面的函數(shù)處理
changeClass(e){?
? ? console.log(e.target);
? ? //可以打印出來e.target里面的值，其實就是頁面的dom元素，然后可以按照自己想法更改樣式了，還可以根據(jù)e找到頁面所有節(jié)點
? ? //例如：e.target.parentNode.style.border = "1px solid red";?
}暫時我所接觸到的方法就是以上三種，以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
分頁在展示數(shù)據(jù)列表的場景肯定是非常多的,一般的項目開發(fā)中,數(shù)據(jù)量特別大,一般都是后端接口直接處理分頁返回,前端直接調(diào)用即可,本文給大家介紹了vue使用elementUI組件實現(xiàn)分頁效果,需要的朋友可以參考下2023-12-12
vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的示例詳解
這篇文章主要給大家介紹了vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的相關(guān)知識,文中通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
項目中需要使用websocke，這個是我自己修修改改好多次之后用得最順手的一版，分享一下。這個封裝需要搭配vuex使用，因為收到的數(shù)據(jù)都保存在vuex中了，真的絕絕子好用，解決了我一大堆問題2022-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實現(xiàn)封裝樹狀圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要介紹了Vue如何實現(xiàn)table表格置頂，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇Vue中img的src是動態(tài)渲染時不顯示的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue中表格設(shè)置某列樣式、不顯示表頭問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Element Backtop回到頂部的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了解決.vue文件url引用文件的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue 翻頁組件vue-flip-page，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02