1
2
3

<div id="app">
  <img :src="apple.imgUrl" :title="apple.name" :alt="apple.name">
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

Vue.createApp({
  data(){
    return{
        apple: {
          name: "蘋果",
          imgUrl: "https://waapple.org/wp-content/uploads/2021/06/Variety_Cosmic-Crisp-transparent-658x677.png"
        }
    }
  }
}).mount("#app");

1
2
3
4
5

<div id="app">
  {{ isReadonly }}
  <input type="text" :readonly="isReadonly">
  <button type="button" @click="changeReadonly">切換狀態</button>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

Vue.createApp({
  data(){
    return{
        isReadonly: true
    }
  },
  methods:{
    changeReadonly(){
        this.isReadonly = !this.isReadonly;
    }
  }
}).mount("#app");

1
2
3
4
5

<div id="app">
  {{ dynamic }}
  <input type="text" :[dynamic]>
  <button type="button" @click="changeStatus">切換狀態</button>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

Vue.createApp({
  data(){
    return{
        dynamic: 'disabled'
    }
  },
  methods:{
    changeStatus(){
      //this.dynamic現在等於disabled嗎？是的話就變成readonly，不是的話就變成disabled
      this.dynamic = this.dynamic === 'disabled' ? 'readonly' : 'disabled';
    }
  }
}).mount("#app");