大三學習進度23

2022-09-18 13:00:13 字數 1577 閱讀 4779

class 與 style 是 html 元素的屬性,用於設定元素的樣式,我們可以用 v-bind 來設定樣式屬性。

vue.js v-bind 在處理 class 和 style 時, 專門增強了它。表示式的結果型別除了字串之外,還可以是物件或陣列。

class 屬性繫結

我們可以為 v-bind:class 設定乙個物件,從而動態的切換 class:

例項 1

例項中將 isactive 設定為 true 顯示了乙個綠色的 div 塊,如果設定為 false 則不顯示:

嘗試一下 »

以上例項 div class 為:

我們也可以在物件中傳入更多屬性用來動態切換多個 class 。

例項 2

text-danger 類背景顏色覆蓋了 active 類的背景色:

v-bind:class="">

嘗試一下 »

以上例項 div class 為:

我們也可以直接繫結資料裡的乙個物件:

例項 3

text-danger 類背景顏色覆蓋了 active 類的背景色:

嘗試一下 »

例項 3 與 例項 2 的渲染結果是一樣的。

此外,我們也可以在這裡繫結返回物件的計算屬性。這是乙個常用且強大的模式:

例項 4

new vue({

data: {

isactive: true,

error: {

value: true,

type: 'fatal'

computed: {

classobject: function () {

return {

base: true,

active: this.isactive && !this.error.value,

'text-danger': this.error.value && this.error.type === 'fatal',

嘗試一下 »

陣列語法

我們可以把乙個陣列傳給 v-bind:class ,例項如下:

例項 5

嘗試一下 »

以上例項 div class 為:

我們還可以使用三元表示式來切換列表中的 class :

例項 6

errorclass 是始終存在的,isactive 為 true 時新增 activeclass 類:

嘗試一下 »

vue.js style(內聯樣式)

我們可以在 v-bind:style 直接設定樣式:

例項 7

菜鳥教程

嘗試一下 »

以上例項 div style 為:

菜鳥教程

也可以直接繫結到乙個樣式物件,讓模板更清晰:

例項 8

菜鳥教程

嘗試一下 »

v-bind:style 可以使用陣列將多個樣式物件應用到乙個元素上:

例項 9

菜鳥教程

嘗試一下 »

注意:當 v-bind:style 使用需要特定字首的 css 屬性時,如 transform ,vue.js 會自動偵測並新增相應的字首

大三學習進度67

sort 方法可以指定公升序或降序排序。sort 方法第乙個引數為要排序的字段,第二個字段指定排序規則,1為公升序,1為降序,預設為公升序。對欄位 alexa 按公升序排序 usr bin python3importpymongomyclient pymongo.mongoclient mongod...

大三學習進度50

建造者模式 builder pattern 使用多個簡單的物件一步一步構建成乙個複雜的物件。這種型別的設計模式屬於建立型模式,它提供了一種建立物件的最佳方式。乙個 builder 類會一步一步構造最終的物件。該 builder 類是獨立於其他物件的。意圖 將乙個複雜的構建與其表示相分離,使得同樣的構...

大三學習進度45

spring 的事務管理是基於 aop 實現的,而 aop 是以方法為單位的。spring 的事務屬性分別為傳播行為 隔離級別 唯讀和超時屬性,這些屬性提供了事務應用的方法和描述策略。在 j a ee 開發經常採用的分層模式中,spring 的事務處理位於業務邏輯層,它提供了針對事務的解決方案。在 ...