1
2
3

<div id="app">
  <input type="text" v-model="inputValue">
</div>

1
2
3
4
5
6
7

Vue.createApp({
  data(){
    return{
      inputValue: '蘋果'
    }
  }
}).mount("#app");

1
2
3

<div id="app">
  <input type="checkbox" v-model="checkAnswer">
</div>

1
2
3
4
5
6
7

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

1
2
3
4

<div id="app">
  <input type="checkbox" v-model="checkAnswer">
  {{ checkAnswer ? '蘋果':'香蕉' }}
</div>

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7
8
9

<div id="app">
  <p>{{ checkboxAnswer }}</p>
  <input id="isCheck"
  type="checkbox"
  v-model="checkboxAnswer"
  true-value="你勾選了"
  false-value="你沒有勾選">
  <label for="isCheck">是否要勾選</label>
</div>

1
2
3
4
5
6
7

Vue.createApp({
  data(){
    return{
      checkboxAnswer: "你沒有勾選"
    }
  }
}).mount("#app");

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

<div id="app">
  <p>您選擇的是：{{ checkboxAnswer.join() }}</p>
  <input id="apple" type="checkbox" v-model="checkboxAnswer" value="蘋果">
  <label for="apple">蘋果</label>
  <br>
  <input id="banana" type="checkbox" v-model="checkboxAnswer" value="香蕉">
  <label for="banana">香蕉</label>
  <br>
  <input id="pineapple" type="checkbox" v-model="checkboxAnswer" value="鳳梨">
  <label for="pineapple">鳳梨</label>
  <br>
</div>

1
2
3
4
5
6
7

Vue.createApp({
  data(){
    return{
      checkboxAnswer: []
    }
  }
}).mount("#app");

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

<div id="app">
  <p>您選擇的是：{{ radioAnswer }}</p>
  <input id="apple" type="radio" v-model="radioAnswer" value="蘋果">
  <label for="apple">蘋果</label>
  <br>
  <input id="banana" type="radio" v-model="radioAnswer" value="香蕉">
  <label for="banana">香蕉</label>
  <br>
  <input id="pineapple" type="radio" v-model="radioAnswer" value="鳳梨">
  <label for="pineapple">鳳梨</label>
  <br>
</div>

1
2
3
4
5
6
7

Vue.createApp({
  data(){
    return{
      radioAnswer: "蘋果"
    }
  }
}).mount("#app");

1
2
3
4
5
6
7
8
9

<div id="app">
  <p>您選擇的水果：{{ selectAnswer }}</p>
  <select v-model="selectAnswer">
    <option value="">請選擇水果</option>
    <option value="蘋果">蘋果apple</option>
    <option value="香蕉">香蕉banana</option>
    <option value="鳳梨">鳳梨pineapple</option>
  </select>
</div>

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7
8
9

<div id="app">
  <p>您選擇的水果：{{ selectAnswer.join() }}</p>
  <select v-model="selectAnswer" multiple>
    <option value="" disabled>請選擇水果</option>
    <option value="蘋果">蘋果apple</option>
    <option value="香蕉">香蕉banana</option>
    <option value="鳳梨">鳳梨pineapple</option>
  </select>
</div>

1
2
3
4
5
6
7

Vue.createApp({
  data(){
    return{
      selectAnswer: []
    }
  }
}).mount("#app");