And using the principle of narrative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<h3>{{message}}</h3>
<- Principle:! 1.v-bind bind a value attribute 2. v-on instruction to the current element is bound to get the value of the current input event input boxes ->
<!--<input type="text" :value="message" v-on:input="valueChange($event)">-->
<!--<input type="text" :value="message" v-on:input="message = $event.target.value">-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
the '#app'
data: {
message: 'Hello'
},
methods: {
valueChange(event){
console.log(event);
this.message = event.target.value
}
}
})
</script>
</body>
</html>
Using v-model binding with radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" name="sex" v-model="sex">男
</label>
<-! In fact, you can put down the name attribute of input tag removed, key removed because the v-model has shown that the name of this key ->
<label for="female">
<input type="radio" id="female" value="女" name="sex" v-model="sex">女
</label>
<H3> select your gender: {{sex}} </ h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
the '#app'
data: {
message: 'Hello'
sex: 'male' // default is male
}
})
</script>
</body>
</html>
V-model combined with the use of the checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<-! 1. v-model using the radio button and checkbox ->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<H2> you choose: {{isAgree}} </ h2>
<button :disabled="!isAgree">下一步</button>
<br>
<-!. 2 v-model and use checkboxes checkbox ->
<input type="checkbox" value="旅游" v-model="hobbies">旅游
<input type="checkbox" value="足球" v-model="hobbies">足球
<Input type = "checkbox" value = "Music" v-model = "hobbies"> Music
<input type="checkbox" value="电影" v-model="hobbies">电影
<H2> Your choices are: {{hobbies}} </ h2>
<-! 3 value binding ->
<label v-for="item in orderHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
the '#app'
data: {
message: 'Hello'
isAgree: false, // boolean
hobbies: [], // array type
orderHobbies: [ 'billiards', 'soccer', 'basketball', 'travel', 'Music', 'Movie']
}
})
</script>
</body>
</html>
v-model is used in conjunction with select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<-!. 1 select a Select ->
<select name="fruit" v-model="fruit">
<Option value = "banana"> Banana </ option>
<Option value = "Apple"> Apple </ option>
<Option value = "durian"> durian </ option>
<Option value = "grape"> grape </ option>
<Option value = "strawberry"> Strawberry </ option>
</select>
<H3> Your choices are: {{fruit}} </ h3>
<-!. 2 select the plurality of selection ->
<select name="fruit" v-model="fruits" multiple>
<Option value = "banana"> Banana </ option>
<Option value = "Apple"> Apple </ option>
<Option value = "durian"> durian </ option>
<Option value = "grape"> grape </ option>
<Option value = "strawberry"> Strawberry </ option>
</select>
<H3> Your choices are: {{fruits}} </ h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
the '#app'
data: {
message: 'Hello'
fruit: 'banana',
fruits: []
}
})
</script>
</body>
</html>
v-model modifiers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<-!. 1 .lazy loses focus modifier or knockout round before going to bind data ->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<! -. 2 digital input .number modifier automatically converted into something are inputted digital type string type ->
<input type="number" v-model.number="age">
<h2>{{age}}---{{typeof age}}</h2>
<-!. 3 .trim modifier strips spaces ->
<input type="text" v-model.trim="name">
<h2>{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
the '#app'
data: {
message: 'Hello'
age: '',
name: ''
}
})
</script>
</body>
</html>
mvvm has introduced three at the beginning of the experience, the two-way binding, responsive