第三講、Vue3.x中的事件方法入門、模板語法模板中類和樣式繫結

frans發表於2021-01-04
Vue事件

一、Vue3.x中的事件方法入門

業務邏輯：

export default {
    data() {
        return {
            num: 1,
            msg: "你好vue",
        };
    },
    methods: {
        setMsg() {
            this.msg = "我是方法裡改變後的msg";
        },
        getMsg() {
            alert(this.msg);
        },
    },
};

template模板：

<template>
<div>
    <h2>{{ msg }}</h2>

    <button @click="setMsg()">設定msg</button>
    <br />
    <br>
    <button @click="getMsg()">獲取msg</button>

    <br>
    <br>
    <h2>Num:{{num}}</h2>

    <button @click="num += 1">Add 1</button>
</div>
</template>

二、Vue3 v-bind繫結Class

當v-bind與class和一起使用時，Vue提供了特殊的增強功能style。除了字串外，表示式還可以求值為物件或陣列。

1.1、v-bind:class繫結字串

業務邏輯：

export default {
    name: "App",
    data() {
        return {
            isActive: "active",
        };
    },
};

template模板：

  <div :class="isActive"></div>

Css：

.active {
    width: 100px;
    height: 100px;
    background: red;
}

1.2、v-bind:class繫結物件

業務邏輯：

export default {
    name: "App",
    data() {
        return {
             isActive: true,
                hasError: false
        };
    },
};

template模板：


<div :class="{ 'active': isActive, 'error': hasError }">
    v-bind:class演示
</div>

Css：

.active {
    width: 100px;
    height: 100px;
    background: red;
}

.error {
    color: blue;
}

1.3、v-bind:class 結合 class的使用

業務邏輯：

export default {
    name: "App",
    data() {
        return {
             isActive: true,
                hasError: false
        };
    },
};

template模板：

class會與:class共同存在

<div class="static" :class="{ 'active': isActive, 'error': hasError }">
    v-bind:class演示
</div>

Css：

.static {
    font-size: 20px;
}

.active {
    width: 100px;
    height: 100px;
    background: red;
}

.error {
    color: blue;
}

它將呈現：

<div class="static active error"></div>

1.4、陣列語法

業務邏輯：

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

模板：

<div :class="[activeClass, errorClass]"></div>

1.5、陣列語法 結合三目運算

業務邏輯：

export default {
    name: "App",
    data() {
        return {
            isActive: true,
            activeClass: 'active',
            errorClass: 'error',
        };
    },
};

模板：

<div :class="[isActive ? activeClass : errorClass]">active</div>

Css：

.active {
    width: 100px;
    height: 100px;
    background: red;
}

.error {
    color: blue;
}

三、v-bind:style 繫結內聯樣式

2.1、第一種繫結方式

業務邏輯：

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

模板:

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

2.2、第二種繫結方式

業務邏輯：

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

模板:

<div :style="styleObject"></div>

2.3、第三種繫結方式 陣列方式

業務邏輯：

data() {
  return {
             baseStyles: {
                color: 'orange',
                fontSize: '13px'
            },
            overridingStyles: {
                width: "100px",
                height: "100px",
                background: "blue"
            }
  }
}

模板:

<div :style="[baseStyles, overridingStyles]"></div>

2.4、自動字首

當您使用需要一個CSS屬性供應商字首的:style，例如transform，Vue公司會自動檢測並新增適當的字首到應用的樣式。

2.5、多個值

您可以為樣式屬性提供多個（字首）值的陣列，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

這隻會呈現瀏覽器支援的陣列中的最後一個值。在此示例中，它將display: flex為支援非字首版本的flexbox的瀏覽器呈現。

四、案例：迴圈資料 第一個資料高亮顯示

業務邏輯：

export default {
    name: "App",
    data() {
        return {
          list: ['馬總', '劉總', '李總'],
        };
    },
};

模板：

<ul>
    <li v-for="(item,index) in list" :key="index" :class="{'red':index==0,'blue':index==1}">{{item}}</li>
</ul>

Css：

.red {
    color: red;
}

.blue {
    color: blue;
}
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章