技術標籤：學習筆記javascriptvue.js

v-model的實際操作

<input type="text" :value="message" v-on:input="valueChange">

<script>
...
methods: {
	valueChange(event){
		this.message = event.target.value
	}
}
</script>

v-model => 語法糖 是繫結更改值屬性

結合v-model:radio

<!--
 
 radio -->
        <label for="male">
            <input type="radio" id="male" name="sex" value="男" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio"
 
 id="female" name="sex" value="女" v-model="sex">女
        </label>
        <h2>你當前選擇的是: {{sex}}</h2>
data: {
	sex: '男'
}

結合v-model: checkbox

 <!-- checkbox -->
        <!-- 單選 -->
        <label for="agreement">
 

            <input type="checkbox" id="agreement" v-model="isAgree">同意協議
        </label>
        <h2>你的選擇是: {{isAgree}}</h2>

        <button :disabled="!isAgree">next</button>
        <br>
        <!-- 多選 -->
            <input type="checkbox" value="籃球" v-model="hobbies">籃球
            <input type="checkbox" value="足球" v-model="hobbies">足球
            <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        <h2>你的愛好是 {{hobbies}}</h2>

...
data: {
	isAgree: false,
    hobbies: []
}

結合v-model和select

 <!-- select -->
        <!-- 選擇1個 -->
        <select name="abc" v-model="fruit">
            <option value="蘋果" >