v-model input双向数据绑定

默认指向input的value值

{message}<br><br>

<input type="text" v-model="message"><br><br>

<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>

<br><br>

<hr>

// 单选

<p>性别为：{{sex}}</p>

<input type="radio" v-model="sex" value="man" id="man" >

<label for="man">man</label>

<input type="radio" v-model="sex" value="woman" id="woman" >

<label for="woman">woman</label><br><br>

<hr>

// 多选

<p>喜欢的运动有：{{love}}</p>

<input type="checkbox" v-model="love" value="basketball" id="basketball" >

<label for="basketball">basketball</label>

<input type="checkbox" v-model="love" value="golf" id="golf" >

<label for="golf">golf</label>

<input type="checkbox" v-model="love" value="football" id="football" >

<label for="football">football</label><br><br>

<hr>

// 下拉

<p>来自：{{local}}</p>

<select name="" id="" v-model="local">

<option value="上海">上海</option>

<option value="陕西">陕西</option>

<option value="山西">山西</option>

<option value="北京">北京</option>

</select>

var vue = new Vue({

el: "#app",

data: {

message: "heiilo",

sex: "man",

love: [ ],

local: "山西"

}

})