快捷導(dǎo)航

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

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

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

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

通過 v-bind:class 或者 :class 來為style或者class來綁定

綁定class

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

js代碼

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

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

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

js代碼

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

通過過數(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"
      }
    },
  });

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

您可能感興趣的文章:

相關(guān)文章

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