vue綁定(radiobutton,下拉選單)

分別為綁定物件、值 及顯示物件、值之範例

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js">
</script>
<div id="app">
  <h2>1.取得選取之值(text):</h2>  
  <h5>(綁定對象：物件內屬性)</h5>
  {{selected1}}
  <select v-model="selected1">
    <option v-for="todo in todos"
            v-bind:value="todo.value">
     {{ todo.text }}
   </option>
  </select><br/>
  <h2>2.取得選取之值(物件):</h2>  
  <h5>(綁定對象：物件)</h5>
  {{selected2}}
  <select v-model="selected2">
    <option v-for="todo in todos"
            v-bind:value="todo">
     {{ todo.text }}
   </option>
  </select>
  <hr/>
  <h2>3.取得選取之值(值):</h2>  
  <h5>(綁定對象：值)</h5>
  {{radio1}}<br/>
  <span v-for="todo in todos">
    <input type="radio" v-bind:value="todo.text" v-model="radio1" v-on:change="change1(todo.text)">
    <label>{{todo.text}}</label>
  </span>
  <hr/>
  <h2>4.取得選取之值(物件):</h2>  
  <h5>(綁定對象：物件)</h5>
  {{radio2}}<br/>
  <span v-for="todo in todos">
    <input type="radio" v-bind:value="todo" v-model="radio2" v-on:change="change2(todo)">
    <label>{{todo.text}}</label>
  </span>
</div>

JavaScript

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false,value:1 },
      { text: "Learn Vue", done: false ,value:2},
      { text: "Play around in JSFiddle", done: true,value:3 },
      { text: "Build something awesome", done: true,value:4 }
    ],
    selected1: "",
    selected2: "",
    radio1:"",
    radio2:""
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
    change1: function(todo){
    	console.log(todo);	//todo.text之值
    },
    change2: function(todo){
    	console.log(todo);	//物件內容
    }
  }
})