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

本篇內容介紹了“vue怎么實現修改標簽中的內容:id class style”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

“vue怎么實現修改標簽中的內容:id class style”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！