快捷導(dǎo)航

vue.js綁定class和style樣式（6）

更新時(shí)間：2016年12月09日 09:00:25 作者：wenjuanzhao

這篇文章我們將一起學(xué)習(xí)vue.js實(shí)現(xiàn)綁定class和style樣式，感興趣的小伙伴們可以參考一下

數(shù)據(jù)綁定一個(gè)常見(jiàn)需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因?yàn)樗鼈兌际?attribute，我們可以用 v-bind 處理它們：只需要計(jì)算出表達(dá)式最終的字符串。不過(guò)，字符串拼接麻煩又易錯(cuò)。因此，在 v-bind 用于 class 和 style 時(shí)，Vue.js 專門增強(qiáng)了它。表達(dá)式的結(jié)果類型除了字符串之外，還可以是對(duì)象或數(shù)組。

通過(guò) v-bind:class 或者 :class 來(lái)為style或者class來(lái)綁定

綁定class

<div class="test">
  <div :class="{active:isActive,cc:isCc}"></div>
 </div>

js代碼

 var myVue = new Vue({
    el: ".test",
    data: {
      isActive:true,
      isCc:false
    },
  });

或者下面的代碼也可以實(shí)現(xiàn)

 <div class="test">
    <div :class=classObject></div>
  </div>

js代碼

var myVue = new Vue({
    el: ".test",
    data: {
      classObject:{
        active:true
      }
    },
  });

通過(guò)過(guò)數(shù)組將class綁定

  <div class="test">
    <div :class="[activeClass,error]">dsdsd</div>
  </div>

js代碼

 var myVue = new Vue({
    el: ".test",
    data: {
      activeClass:"active",
      error:"ddd"
    },
  });

綁定style屬性

<div class="test">
    <div :style=styleObject>dsdsd</div>
  </div>

js代碼

  var myVue = new Vue({
    el: ".test",
    data: {
      styleObject:{
       color: "red",
        fontSize: "30px"
      }
    },
  });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件
本篇文章主要介紹了vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08
Vue使用Swiper的案例詳解
這篇文章主要介紹了Vue使用Swiper的案例詳解，主要包括引入swiper,創(chuàng)建輪播圖組件CarouselContainer.vue的詳細(xì)代碼，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-06-06
VsCode里的Vue模板的實(shí)現(xiàn)
這篇文章主要介紹了VsCode里的Vue模板的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
uniapp+Vue3 組件之間的傳值方法示例詳解
文章主要介紹了父子傳值、兄弟傳值和provide/inject三種在Vue中進(jìn)行組件間通信的方法,感興趣的朋友跟隨小編一起看看吧
2025-03-03
vue 通過(guò)綁定事件獲取當(dāng)前行的id操作
這篇文章主要介紹了vue 通過(guò)綁定事件獲取當(dāng)前行的id操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
element中el-autocomplete的常見(jiàn)用法示例
這篇文章主要給大家介紹了關(guān)于element中el-autocomplete的常見(jiàn)用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用element具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-03-03
Vue項(xiàng)目配置@別名全過(guò)程
這篇文章主要介紹了Vue項(xiàng)目配置@別名全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
今天就好好說(shuō)說(shuō)vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問(wèn)題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧
2022-06-06
Vue實(shí)現(xiàn)docx、pdf格式文件在線預(yù)覽功能
在業(yè)務(wù)中，如果遇到文檔管理類的功能，會(huì)出現(xiàn)需要在線預(yù)覽的業(yè)務(wù)需求，本文主要是通過(guò)第三方庫(kù)來(lái)實(shí)現(xiàn)文檔預(yù)覽功能，并將其封裝成preview組件,感興趣的可以了解一下
2022-09-09
vue-router安裝和使用詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,分步驟介紹了安裝和使用vue-router的方法,感興趣的朋友跟隨小編一起看看吧
2023-08-08