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

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

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

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

v-bind,v-model注意

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

Mustache (雙大括號寫法)不能在 HTML 屬性中使用，應使用 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必須存在，之前試過很多種方法，都不能正確顯示，所以我就強制加了一個判斷條件：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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: