19. 表单复选框
知识点
- v-model
- input[type=“checkbox”]
表单复选框绑定
<div id="myApp"> <h1>表单复选框</h1> <input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames"> <label for="生化危机7">生化危机7</label> <input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames"> <label for="模拟飞行">模拟飞行</label> <input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames"> <label for="塞尔达传说">塞尔达传说</label> <br> <p>您选择的游戏是: {{ checkedGames }}</p> </div> <script> var myApp = new Vue({ el: '#myApp', data: { checkedGames: [] }, methods: { }, }); </script>
20. 表单单选按钮
知识点
- v-model
- input[type=“radio”]
表单单选按钮绑定
<div id="myApp"> <h1>表单单选按钮</h1> <h3>选择性别</h3> <input type="radio" id="male" value="男" v-model="pickedSex"> <label for="male">男</label> <br> <input type="radio" id="female" value="女" v-model="pickedSex"> <label for="female">女</label> <h3>选择爱好</h3> <input type="radio" id="game" value="玩游戏" v-model="pickedHobby"> <label for="game">玩游戏</label> <br> <input type="radio" id="movie" value="看电影" v-model="pickedHobby"> <label for="movie">看电影</label> <h3>选择结果</h3> <p>性别: {{ pickedSex }}</p> <p>爱好: {{ pickedHobby }}</p> </div> <script> var myApp = new Vue({ el: '#myApp', data: { pickedSex: "", pickedHobby: "", }, methods: { }, }); </script>
21. 表单下拉框
知识点
- v-model
- select
表单下拉框绑定
<div id="myApp"> <h3>你最喜欢的NBA球星是:</h3> <select v-model="likedNBAStar" style="width:210px;"> <option>科比</option> <option>詹姆斯</option> <option>哈登</option> <option>库里</option> <option>杜兰特</option> </select> <h3>我的全明星:</h3> <select v-model="likedNBAStars" multiple style="width:210px;height:210px;"> <option>阿德托昆博</option> <option>怀特赛德</option> <option>阿尔德里奇</option> <option>戴维斯</option> <option>格里芬</option> <option>詹姆斯</option> <option>杜兰特</option> <option>巴特勒</option> <option>德罗赞</option> <option>哈登</option> <option>科比</option> <option>韦德</option> <option>伦纳德</option> <option>库里</option> <option>欧文</option> <option>保罗</option> <option>林树豪</option> </select> <h3>选择结果</h3> <p>我最最喜欢: {{ likedNBAStar }}</p> <p>我的全明星: {{ likedNBAStars }}</p> </div> <script> var myApp = new Vue({ el: '#myApp', data: { likedNBAStar: null, likedNBAStars: [], }, methods: { }, }); </script>
22. 表单修饰符
知识点
- .lazy
- .number
- .trim
.lazy
用户输入内容时不做绑定数据的更新处理,在控件的onchange事件中更新绑定的变量。
用户名:<input v-model.lazy="username">
.number
将用户输入的内容转换为数值类型,如果用户输入非数值的时候,则返回NaN。
年龄:<input v-model.number="age" type="number">
.trim
自动去掉用户输入内容两端的空格。
意见:<input v-model.trim="content">
综合例
<div id="myApp"> <h1>用户注册</h1> <div> <label for="username">用户:</label> <input type="text" id="username" v-model.lazy="username" @change="checkUsername"> <span v-if="checkUsernameOK">可注册</span> </div> <div> <label for="age">年龄:</label> <input type="number" id="age" v-model.number="age"> </div> <div> <label for="content">个人简介:</label><br/> <textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea> </div> <h4>信息区</h4> <p>{{username}}</p> <p>{{age}}</p> <p><pre>{{content}}</pre></p> </div> <script> var myApp = new Vue({ el: '#myApp', data: { username: "", checkUsernameOK: false, age: "", content: "", }, methods: { checkUsername: function(){ if (this.username.length > 0) this.checkUsernameOK = true; else this.checkUsernameOK = false; }, }, }); </script>
23. 组件:基础的基础
知识点
- 组件(Component,Portlet)
组件
组件就是页面上的一小块区域内容,完成一个小的页面功能,请参照视频第六课。
综合例
<div id="myApp"> <today-weather></today-weather> </div> <script> Vue.component('today-weather', { template: '<div>今天下雨,出不去啦,干什么呢?看Youtube吧!</div>' }); var myApp = new Vue({ el: '#myApp', }); </script>
24. 组件:局部的组件
知识点
- 组件的局部注册
组件
Vue.js的组件不仅可以单独声明注册使用,还可以在Vue实例中进行局部注册使用。
综合例
<div id="myApp"> <my-weather></my-weather> </div> <script> var WeatherComponent = { template: '<div>今天下雨,随它去吧!</div>' }; var myApp = new Vue({ el: '#myApp', data: { }, components: { 'my-weather': WeatherComponent }, }); </script>