11-0

const App = {
  data() {
    return {
      name: '小明',
      isFull: false,
      link: '小明',
      imageSize: 200,
      dynamic: 'disabled',
      breakfastShop: {
        name: '奇蹟早餐',
        imgUrl: 'https://picsum.photos/id/42/500/',
        resizeImg: 'https://picsum.photos/id/42/500/'
      },
      products: [
        {
          name: '蛋餅',
          price: 30,
          vegan: false,
          imgUrl: 'https://images.unsplash.com/photo-1607278967323-8766a3a501e6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80'
        },
        {
          name: '飯糰',
          price: 35,
          vegan: false,
          imgUrl: 'https://images.unsplash.com/photo-1603245460565-5a7b42a6a6f4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80'
        }
      ],
    }
  },
  methods: {
    change: function (key) {
      this[key] = !this[key];
    },
  },
};

Vue.createApp(App).mount('#app');

11-1 v-bind使用方式

  <!-- v-bind為指令綁定html屬性 -->
  <p>{{ breakfastShop.name }}</p>
  <img v-bind:src="breakfastShop.imgUrl" v-bind:title="breakfastShop.name" class="square-img" alt="">

  <h3>縮寫形式 <code>:</code></h3>
  <img :src="breakfastShop.imgUrl" :title="breakfastShop.name" class="square-img" alt="">

11-2 更多屬性綁定

  小明還想點餐：
  <form action="">
    <input type="text" value="我要吃蘿蔔糕">
    <button type="submit" :disabled="isFull">送出</button>
  </form>

  <button type="button" v-on:click="change('isFull')">狀態切換</button>

11-3 搭配 v-for綁定

  <table class="table">
    <tbody>
      <tr v-for="item in products" :key="item.imgUrl">
        <td>
          <img :src="item.imgUrl" class="square-img" alt="">
        </td>
        <td>
          {{ item.name }}
        </td>
        <td>
          {{ item.price }}元
        </td>
        <td>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" :id="item.name">
            <label class="form-check-label" :for="item.name">
              我要這個
            </label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

11-4 表達式運用（串接）

  <p>{{ imageSize }}</p>
  <input type="range" min="100" max="1000" v-model="imageSize">
  <br>
  <!-- 搭配表達式寫法動態切換html屬性 -->
  <img :src="`${breakfastShop.resizeImg}${imageSize}`" alt=""
  ><br>

11-5 動態屬性綁定(注意大小寫)

  <!-- 當dynamic = 'disabled'，顯示 readonly，反之，顯示disabled-->
  <button type="button"
  v-on:click="dynamic = dynamic === 'disabled' ? 'readonly':'disabled'">切換為 {{ dynamic }}</button>
  <br>
  {{dynamic}}
  <!-- v-bind可以綁定動態值 -->
  <!-- 原本僅按鈕綁定動態值，在輸入框語法上加入:[dynamic]，也跟著按鈕變動 -->
  <input type="text" :[dynamic]  :value="name">

!

知識點來源:六角課程

以上是今天所提供知識點如有誤，再請務必在下面留言~