v-for="" 循环
v-model='' 双向数据绑定 用于表单元素
v-on:事件名='函数名' 绑定一个事件的 简写@click=""
v-bind:属性名='' 绑定一个属性 简写 ：属性名='值'
v-show="" 控制元素的显示或隐藏 display:none
v-if="" 控制元素的显示或隐藏 visibility:hidden;
tofixed(n//保留几位小数)
display:none;与visibility：hidden的区别
1.display:none是彻底消失 不在文档流中占位浏览器也不会解析该元素；
visibility:hidden是视觉上消失了 可以理解为透明度为0的效果，在文档流中占位。浏览器会解析该元素；
2.使用vibility:hidden比display：none性能上要好，display:none切换显示时visibility。页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流 所有页面第一加载时需要产生第一次回流），而visibility，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流),而vibisility切换是否显示时则不会引起回流。
所以我使用visibility:hidden,在页面渲染时第二个tab页面中的轮播图就可以获取宽度做自适应了
第一节
<script type="text/javascript"src="vue.j/vue.js">
</script>
<style type="text/css">
input{
width: 100%;
height: 33px;
border-radius: 5px;
font-size: 8px;
}
p{
margin-top: 25px;
}
.box{
margin-top: 20px;
}
tr{
height:40px;
}
</style>
<body>
<div class="container" id="itany">
<h1 class="text-center">添加用户</h1>
<p>姓名</p>
<input type="text" v-model="str" placeholder="请输入姓名">
<p>年龄</p>
<input type="text" v-model="ben" placeholder="请输入年龄">
<p>邮箱</p>
<input type="text" v-model="sen" placeholder="请输入邮箱">
<div class="box text-center">
<button class="btn btn-primary" v-on:click="add">添加</button>
<button class="btn btn-success" v-on:click="chong">重置</button>
</div>
<table border="" cellspacing="" cellpadding="" width="100%" style="text-align: center;">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>邮箱</td>
<td>操作</td>
</tr>
<tr v-for='(v,index) in arr'>
<td>{{v.num}} </td>
<td>{{v.name}}</td>
<td>{{v.old}}</td>
<td>{{v.email}}</td>
<td><button v-on:click="the(index)">删除</button></td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#itany',
data:{
arr:
[
{num:'1',name:'tom',old:'18',email:'tom@126.com'},
{num:'2',name:'jack',old:'19',email:'jack@126.com'},
{num:'3',name:'amy',old:'20',email:'amy@126.com'}
],
str:'',
ben:'',
sen:'',
},
methods:{
add:function(){
this.arr.push({num:this.arr.length+1,name:this.str,old:this.ben,email:this.sen})
},
the:function(ind){
this.arr.splice(ind,1)
},
}
})
</script>
第二节 v-if vi-else-if v-else 的运用
<body>
<div id="itany">
<p v-if="num==0">0000000</p>
<p v-else-if="num==1">11111</p>
<p v-else-if="num==2">222222</p>
<p v-else-if="num==3">3333</p>
<p v-else-if="num==4">4444</p>
<p v-else="num==5">555555</p>
</div>
<script type="text/javascript" src="vue.js/vue.js">
</script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
// num:Math.floor(Math.random()(max-min+1)+min) 随机数定义公式
num:Math.floor(Math.random()(5-0+1)+0)
}
})
</script>
</body>
第三节 切换图片的选项卡
<style>
ul{
overflow: hidden;
}
li{
text-decoration: none;
float: left;
border: 1px solid black;
width: 60px;
text-align: center;
list-style: none;
}
</style>
<body>
<div id="itany">
<img v-bind:src="url"/>
<ul>
<li v-for="(value,index) in list" v-on:click="org(index)">{{index+1}}</li>
</ul>
</div>
<script type="text/javascript" src="vue.js/vue.js">
</script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
list:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
},
methods:{
org:function(ind){
this.url=this.list[ind]
}
}
})
</script>
</body>