vue學習筆記（四）

1.class與style綁定的作用
操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表達式計算出字符串結果即可。不過，字符串拼接麻煩且易錯。因此，在將 v-bind 用于 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字符串之外，還可以是對象或數組。
1.1 綁定css

在這里插入圖片描述
一個簡單的多個css屬性綁定，通過控制isActive,hasError的值來實現一些效果，得到的結果如下圖所示，class只有如下倆個屬性。

1.2css綁定一個計算屬性
可以綁定一個具有計算屬性的對象，實現比較復雜的邏輯計算。
在這里插入圖片描述
上述代碼通過計算得到css的屬性，如下如所示

1.3 css綁定數組
通過設置數組的屬性，將屬性綁定到對應的class上面，然后進行頁面渲染。

通過上面的綁定，得到的結果如下圖所示。

2 綁定style內聯樣式
v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名
2.1內聯樣式的綁定
在這里插入圖片描述
通過內聯樣式的屬性綁定，得到如下所示的結果

2.2 數組對象的綁定與綁定類名相類似

html代碼
<div v-bind:style="styleObject"></div>

js 代碼
styleObject: {
    color: 'red',
    fontSize: '13px'
  }

本文鏈接：https://blog.csdn.net/qq_33482132/article/details/96267534

智能推薦

Vue.js學習筆記第四天

Vue實例的生命周期主要是created（）和mounted（）這兩個方法 vue-resource實現get post jsonp請求...

前端學習筆記四：Vue（3）樣式綁定

都懶得想開頭了，直接上。代碼：運行結果：...

cassandra學習筆記四

現在開始深入了解一下cassandra的數據模型。cassandra是一種NoSQL數據庫，NoSQL并不是指沒有SQL語句，而是指NoRelational。cassandra的數據模型結合了Dynamo的key/value和BigTable 的面向列的特點，主要被設計為存儲大規模的分布式數據。 PS:圖片在這里顯示不全，why？要看圖片，可以另存為或復制圖片地址，在瀏覽器里打開。一、cassa...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

vue學習筆記（四）

智能推薦

猜你喜歡