2020-11-21 Vue09-v-model
45
<body>
<div id="app">
<input type="text" v-model="firstName">
<br>
{{firstName}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe'
}
})
</script>
</body>
<body>
<div id="app">
<input type="text" :value="firstName" @input="valueChange">
<br>
{{firstName}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe'
},
methods: {
valueChange(event){
this.firstName = event.target.value;
}
}
})
</script>
</body>
可以實現與上面相同的功能
<input type="text" :value="firstName" @input="firstName=$event.target.value">
不用methods,直接在@input後面寫.
46-v-model-radio
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" name="name" value="男" v-model="sex">男
</label>
<!-- label保證在點選文字時候和點選radio時候效果一樣 -->
<label for="female">
<input type="radio" id="female" name="name" value="女" v-model="sex">女
</label>
<!-- name的value相同才是單選框 -->
<br>
<br>
{{sex}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
sex: '男'
}
})
</script>
</body>
47-v-model-checkbox
單選
<div id="app">
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同一協議
</label>
<br>
您的選擇是:{{isAgree}}
<br>
<button :disabled="!isAgree">下一步</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
isAgree: false
}
})
</script>
多選:
<div id="app">
<input type="checkbox" value="籃球" v-model='hobbies'>籃球
<br>
<input type="checkbox" value="足球" v-model='hobbies'>足球
<br>
<input type="checkbox" value="排球" v-model='hobbies'>排球
<br>
您的愛好是{{hobbies}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
isAgree: false,
hobbies: []
}
})
</script>
48-v-model-select
<div id="app">
<select name="abc" id="" v-model="fruit">
<option value="蘋果" >蘋果</option>
<option value="葡萄" >葡萄</option>
<option value="香蕉" >香蕉</option>
<option value="榴蓮" >榴蓮</option>
</select>
<br>
{{fruit}}
<br>
<br>
<select name="abc" id="" v-model="fruits" multiple>
<option value="蘋果" >蘋果</option>
<option value="葡萄" >葡萄</option>
<option value="香蕉" >香蕉</option>
<option value="榴蓮" >榴蓮</option>
</select>
{{fruits}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
fruit: '香蕉',
fruits: ['香蕉']
}
})
</script>
49
<div id="app">
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
<br>
<br>
{{hobbies}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
originHobbies: ['檯球','高爾夫球','羽毛球','乒乓球','足球','籃球'],
hobbies: []
}
})
</script>
50
lazy
<div id="app">
<input type="text" v-model.lazy="firstName">
<br>
<br>
{{firstName}}
</div>
number
<div id="app">
<input type="number" v-model.number="age">
<br>
<br>
{{age}}
</div>
trim
<div id="app">
<input type="text" v-model.trim="firstName">
</div>