1
2
3

<div id="app">
  <p v-if="apple">蘋果</p>
</div>

1
2
3
4
5
6
7

Vue.createApp({
  data(){
    return{
        apple: false //true顯示，false不顯示
    }
  }
}).mount("#app");

1
2
3
4

<div id="app">
  <p v-show="apple">蘋果</p>
  <button type="button" @click="toggleApple">按鈕</button>
</div>

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

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

1
2
3
4

<div id="app">
  <p v-if="apple">蘋果</p>
  <button type="button" @click="toggleApple">按鈕</button>
</div>

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

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

1
2
3
4
5

<div id="app">
  <p v-if="apple">蘋果</p>
  <p v-else>香蕉</p>
  <button type="button" @click="toggleApple">按鈕</button>
</div>

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

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

1
2
3
4
5
6
7
8
9

<div id="app">
  <p>{{ fruits }}</p>
  <p v-if="fruits == '蘋果'">一個15元</p>
  <p v-else-if="fruits == '香蕉'">一個20元</p>
  <p v-else-if="fruits == '鳳梨'">一個35元</p>
  <button type="button" @click="changeFruits('蘋果')">蘋果</button>
  <button type="button" @click="changeFruits('香蕉')">香蕉</button>
  <button type="button" @click="changeFruits('鳳梨')">鳳梨</button>
</div>

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

Vue.createApp({
  data(){
    return{
        fruits: "蘋果"
    }
  },
  methods:{
    changeFruits(item){
      this.fruits = item;
    }
  }
}).mount("#app");

1
2
3
4
5
6
7

<div id="app">
  <ul>
    <template v-for="item in fruits">
      <li v-if="item.price < 30">{{ item.name }}</li>
    </template>
  </ul>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const fruits = [
  {
    name: "蘋果",
    price: 15,
    import: true
  },
  {
    name: "香蕉",
    price: 20,
    import: true
  },
  {
    name: "鳳梨",
    price: 35,
    import: false
  }
]

Vue.createApp({
  data(){
    return{
        fruits: fruits
    }
  }
}).mount("#app");