vue實現修改標簽中的內容:id class style

Posted on by

vue修改標簽的內容:id class style

v-bind,v-model註意

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

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';
      }
     }

動態改變class和style的一些方法

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

這句話的意思是，class1和class2都是兩個樣式，但是class1是必須存在的，class2是要根據data裡面的status的狀態來決定是否存在的，class1必須存在，之前試過很多種方法，都不能正確顯示，所以我就強制加瞭一個判斷條件：true==true，然後後面的是動態綁定內容（動態綁定）

ref="one"

對於想改變的地方綁定一個ref，讓參數按照引用傳遞

然後可以在下面的函數中來改變，例如：

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

使用$event

在需要改變的地方，加入$event參數（如果隻有一個不加也可以），例如：

@click="changeClass($event)"

下面的函數處理

changeClass(e){ 
    console.log(e.target);
    //可以打印出來e.target裡面的值，其實就是頁面的dom元素，然後可以按照自己想法更改樣式瞭，還可以根據e找到頁面所有節點
    //例如：e.target.parentNode.style.border = "1px solid red"; 
}

暫時我所接觸到的方法就是以上三種，以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：