2023年度鐵人_[Day 09] html屬性綁定三型

在上一篇有提及關於內嵌的屬性

以css style是無法直接透過雙花括號來做綁定的

因此在vue中提供了v-bind指令來去針對html元素上進行響應式的綁定

在 HTML 元素上，給屬性指定一個動態的屬性值，則要在屬性名稱

前面使用 v-bind 指令

型1.v-bind指定id

語法如下:

<div v-bind:id="js/ts變數名"></div>

簡化語法如下:

<div :id="變數名"></div>

這邊後續可能對應的腳本你會用js(javascript)或ts(typescript)

在此我們都會只先針對js部分做示範

這裡的變數名是指在<script>標籤中所定義的variable。

若綁定的變數值是 null 或 undefined，則該屬性將會從渲染的HTML 元素上移除。

藉此可將動態變化的值賦予給html屬性，即時的屬性值響應到 HTML 元素上。

型1.語法1範例

<template>
    <div class="w-400">
      <div>
        <input type="text" v-bind:id="myid" />
      </div>
    </div>
  </template>
<script setup>
    let myid = "txtName";
    
</script>

<style>
    .w-400{
        width: 400px;
    }
</style>

型1.語法1簡化版範例

<template>
    <div class="w-400">
      <div>
        <input type="text" :id="myid" />
      </div>
    </div>
  </template>
<script setup>
    let myid = "txtName";
    
</script>

<style>
    .w-400{
        width: 400px;
    }
</style>

型2.v-bind指定bool型別

這裡在介紹另一種形式，使用 v-bind 還可以指定boolean的值，若為 true，則屬性存在

HTML 元素上，若為 false，則屬性不存在。

型2.範例

輸入框可否輸入與否

<template>
    <div class="w-400">
      <div>
        <input type="text" :disabled="isButtonDisabled" />
      </div>
    </div>
  </template>
<script setup>
    let isButtonDisabled=true;
    
</script>

<style>
    .w-400{
        width: 400px;
    }
</style>

因為 isButtonDisabled 的值為 true，所以 disabled 存在元素上，文字輸入框不可輸入。

將上一篇的有BUG的錯誤程式套用型2.修正如下

<template>
    <div class="w-400">
      <h3>新增員工</h3>
      <hr />
      <div>
        <label for="fullName">姓名：</label>
        <input type="text" id="fullName" />
      </div>
      <div>
        <input type="button" @click="getData()" value="提交" />
      </div>
      <div>
        <span>姓名:{{strName  }}</span>
      </div>
      <div v-html="strHtml">
      </div>
      <p v-bind:class="{'highlight-text': cssClass}">abc 123</p>
    </div>
  </template>
<script setup>
    let strName = "Tom";
    let strHtml = "<p style='color:green'>一段綠色文字的html測試</p>";
    //let cssClass = "highlight-text";
    let cssClass = true;
    function getData() {
        alert("第一個Vue測試。");
    }
</script>

<style>
    .highlight-text {
        color: #ff6600; /* 字顏色為橙色 */
        font-size: 18px; /* 字的大小为18像素 */
        font-weight: bold; /* 加粗 */
        text-decoration: underline; /* 有下划線 */
    }
    .w-400{
        width: 400px;
    }
</style>

當 cssClass 的值為 true 時，highlight-text 類將被添加到 <p> 標籤上，從而

應用相應的 CSS 樣式。

反之，則不會套用樣式

型3.v-bind指定物件複合多屬性值

在 Vue 中使用 v-bind 可以同時給 HTML 元素綁定多個屬性和值，此時 v-bind 不能使用簡潔語法，而需要透過{}以物件的形式寫多個屬性和值，屬性的名稱要正確。

型3.範例

<template>
    <div class="w-400">
      <div>
        <input type="text" v-bind="stuObject" />
      </div>
    </div>
  </template>
<script setup>
    let stuObject = {
        id:'A001',
        class:'三年二班',
        name:'Ted'
    }
    
</script>

<style>
    .w-400{
        width: 400px;
    }
</style>

在此使用 v-bind="mutilValue物件變數名"來去绑定多个属性和值。

<input>元素上已經添加上 id、class 和 name 屬性，是通過 v-bind="stuObject"添加上去的，一次可以同時添加多個屬性和對應的值。