vue练习一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ background-color: blue; width: 100px; height: 100px; } .box{ border: 1px red solid; } </style> </head> <body> <!--vue只能接管一个div--> <div id="app"> <!--{{msg}}--{{count+1}}--> <!--全写--> <!--<input type="button" v-on:click="change" value="change">--> <!--简写--> <!--<input type="button" @click="login" value="登录">--> <!--全写--> <!--<a v-bind:href="url">{{url}}</a>--> <!--简写--> <!--<div :class="classes"></div>--> <!--<div :class="{bg:is_bg,box:is_box}"></div>--> <!--<input type="button" value="changeClass" @click="changeClass">--> <!--v-if v-else-if v-slse--> <!--<span v-if="phoneNumber==10086">中国移动</span>--> <!--<span v-else-if="phoneNumber==10010">中国联通</span>--> <!--<span v-else>中国电信</span>--> <!--v-show 自定义属性，不匹配时，display：none隐藏了--> <!--<span v-show="phoneNumber==10086">中国移动</span>--> <!--v-for list 写在那个标签，循环那个标签--> <!--<ul >--> <!--<li v-for="(game,index) in games">{{game}}--{{index+1}}</li>--> <!--</ul>--> <!--v-for map--> <!--<ul>--> <!--<li v-for="(value,key) in games">{{value}}--{{key}}</li>--> <!--</ul>--> <!--v-for list map--> <ul> <li v-for="game in games">{{game.name}}</li> </ul> </div> <script src="vue.js"></script> <script> new Vue({ // 接管的标签 el:'#app', data:{ msg:'test', count:0, url:'http://www.baidu.com', classes:['bg','box'], is_bg:true, is_box:true, phoneNumber:10010, // games:['绝地求生','英雄联盟','王者荣耀'] // games:{'name':'绝地求生','company':'蓝洞'} games:[{"name":"绝地求生"},{"name":"英雄联盟"},{"name":"王者荣耀"}] }, methods:{ change:function () { // alert('test') // alert(this.msg) this.msg='change msg' }, changeClass:function () { this.classes=['bg'] } } }) </script> </body> </html>
双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--用过v-model实现双向绑定--> <div>{{input_value}}</div> <input type="text" v-model="input_value"> <input type="button" value="change" @click="change"> <div>{{sex}}</div> <input type="radio" value="1" name="sex" v-model="sex">男 <input type="radio" value="2" name="sex" v-model="sex">女 <div>{{movies}}</div> <input type="checkbox" value="钢铁侠" v-model="movies">钢铁侠 <input type="checkbox" value="复仇者" v-model="movies">复仇者 <!--<div>{{movie}}</div>--> <!--<select v-model="movie">--> <!--<option disabled value="">请选择</option>--> <!--<option value="钢铁侠">钢铁侠</option>--> <!--<option value="复仇者">复仇者</option>--> <!--</select>--> <div>{{movie}}</div> <select v-model="movie"> <option disabled value="">请选择</option> <option v-for="option in options" :value="option.id">{{option.name}}</option> </select> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data:{ input_value:'default', sex:1, movies:['钢铁侠'], movie:'', options:[{"name":"变形金刚","id":1}, {"name":"复仇者联盟","id":2}, {"name":"飞驰人生","id":3}] }, methods:{ change:function () { this.input_value='change value' } } }) </script> </body> </html>