文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單輸入綁定</title>
</head>
<body>
<div id='app'>
<!-- 文本框 -->
<label>姓名是:</label>
<input v-model="message1" placeholder="請輸入" />
<!-- 多行文本 -->
<p>多行文本</p>
<textarea v-model="message2" placeholder="多行文本"></textarea>
</div>
</div>
<script src="vue.js"></script>
<script>
var app1 = new Vue({
el: "#app",
data: {
message1: '又又',
message2: '1234567890987654321'
}
});
</script>
</body>
</html>
復選框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>復選框</title>
</head>
<body>
<div id="app">
<!-- 單個復選框，綁定到boolean值 -->
<!--for屬性規定與那個input進行綁定 -->
<input type="checkbox" v-model="checked" id="check" />
<label for="checkbox">{{checked}}</label>
</div>
<div id="app1">
<!-- 多個復選框，綁定同一個數組 -->
<input type="checkbox" v-model="item" id="check1" value="復選框1" />
<label>復選框1</label>
<input type="checkbox" v-model="item" id="check2" value="復選框2"/>
<label>復選框2</label>
<input type="checkbox" v-model="item" id="check3" value="復選框3"/>
<label>復選框3</label>
<input type="checkbox" v-model="item" id="check4" value="復選框4"/>
<label>復選框4</label>
</br>
<p>所選中：
<span>{{item}}</span>
</p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
checked: "true"
},
model: {
checkbox: function() {
this.checked = (this.checked == 'true') ? 'false' : 'true';
}
}
});
var app1 = new Vue({
el: "#app1",
data: {
item:[]
}
})
</script>
</body>
</html>