目次
1. 単一行/複数行のテキストで使用する
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../js/vue.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
</head>
<body>
<div id="root">
<div>
<label>用户名：</label><input type="text" v-model="user.username">
</div>
<div>
<label>简介：</label><textarea v-model="user.introduction"></textarea>
</div>
{
{user.username}}
{
{user.introduction}}
</div>
<script>
new Vue({
el: '#root',
data: {
user: {
username: "admin",
introduction: "我是admin..."
}
},
})
</script>
</body>
</html>次に、チェックボックスで使用します
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../js/vue.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
</head>
<body>
<div id="root">
<div>
<input type="checkbox" v-model="user.hobby" value="1"><label>Chinese</label>
<input type="checkbox" v-model="user.hobby" value="2"><label>Math</label>
<input type="checkbox" v-model="user.hobby" value="3"><label>English</label>
</div>
{
{user.hobby}}
</div>
<script>
new Vue({
el: '#root',
data: {
user: {
hobby: []
}
},
})
</script>
</body>
</html>３、ラジオボックス内での使用
<div id="root">
<div>
<input type="radio" v-model="user.sex" value="1"><label>男</label>
<input type="radio" v-model="user.sex" value="2"><label>女</label>
</div>
{
{user.sex}}
</div>
<script>
new Vue({
el: '#root',
data: {
user: {
sex: "1"
}
},
})
</script>4. ドロップダウンボックスで使用します
<div id="root">
<div>
<select v-model="user.cityIndex">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
</div>
{
{user.cityIndex}}
</div>
<script>
new Vue({
el: '#root',
data: {
user: {
cityIndex: "1"
}
},
})
</script>v-forと組み合わせる
<body>
<div id="root">
<div>
<select v-model="cityIndexChooesd">
<option v-for="(city, index) in cityList" :value="city.value">{
{city.name}}</option>
</select>
</div>
{
{cityIndexChooesd}}
</div>
<script>
new Vue({
el: '#root',
data: {
cityIndexChooesd: "01",
cityList: [{
name: "北京",
value: "01"
},
{
name: "上海",
value: "02"
},
{
name: "深圳",
value: "03"
},
]
},
})
</script>
</body>5. 修飾子
<body>
<div id="root">
<div>
<input type="text" v-model.lazy="content">
</div>
{
{content}}
</div>
<script>
new Vue({
el: '#root',
data: {
content: ""
},
})
</script>
</body>