快捷導(dǎo)航

vue實(shí)現(xiàn)修改標(biāo)簽中的內(nèi)容:id class style

更新時(shí)間：2022年07月02日 15:52:32 作者：kxukai

這篇文章主要介紹了vue實(shí)現(xiàn)修改標(biāo)簽中的內(nèi)容：id class style，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue修改標(biāo)簽的內(nèi)容:id class style

v-bind,v-model注意

v-bind動(dòng)態(tài)綁定指令，默認(rèn)情況下標(biāo)簽自帶屬性的值是固定的，在為了能夠動(dòng)態(tài)的給這些屬性添加值，可以使用v-bind:你要?jiǎng)討B(tài)變化的值=“表達(dá)式”
v-bind用于綁定屬性和數(shù)據(jù) ，其縮寫(xiě)為“ : ” 也就是v-bind:id === :id
v-model用在表單控件上的，用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定，所以如果你用在除了表單控件以外的標(biāo)簽是沒(méi)有任何效果的。

Mustache (雙大括號(hào)寫(xiě)法)不能在 HTML 屬性中使用，應(yīng)使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

這對(duì)布爾值的屬性也有效 —— 如果條件被求值為 false 的話(huà)該屬性會(huì)被移除：

<button v-bind:disabled="someDynamicCondition">Button</button>

<p :[list]="demo()">{{demo()}}</p>
el: '#example',
  data: {
    id: 1,
    list: 'class'
  },
     methods:{
      demo(){
          return 'a';
      }
     }

動(dòng)態(tài)改變class和style的一些方法

:class="{'class1':'true'=='true',class2:status=='status'}"

這句話(huà)的意思是，class1和class2都是兩個(gè)樣式，但是class1是必須存在的，class2是要根據(jù)data里面的status的狀態(tài)來(lái)決定是否存在的，class1必須存在，之前試過(guò)很多種方法，都不能正確顯示，所以我就強(qiáng)制加了一個(gè)判斷條件：true==true，然后后面的是動(dòng)態(tài)綁定內(nèi)容（動(dòng)態(tài)綁定）

ref="one"

對(duì)于想改變的地方綁定一個(gè)ref，讓參數(shù)按照引用傳遞

然后可以在下面的函數(shù)中來(lái)改變，例如：

this.$refs.one.style.border = "1px solid red";

使用$event

在需要改變的地方，加入$event參數(shù)（如果只有一個(gè)不加也可以），例如：

@click="changeClass($event)"

下面的函數(shù)處理

changeClass(e){?
? ? console.log(e.target);
? ? //可以打印出來(lái)e.target里面的值，其實(shí)就是頁(yè)面的dom元素，然后可以按照自己想法更改樣式了，還可以根據(jù)e找到頁(yè)面所有節(jié)點(diǎn)
? ? //例如：e.target.parentNode.style.border = "1px solid red";?
}

暫時(shí)我所接觸到的方法就是以上三種，以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: