<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.active{
background:green;
color:white;
}
#app{
margin:0 auto;
}
th,td{
height:30px;
width:100px;
}
</style>
<body>
<div id="app">
<legend>Create new Person</legend>
<p>Name:<input type="text" v-model="perple.name"></p>
<br>
<p>Age:<input type="text" v-model="perple.age"></p>
<br>
<p>
Sex:
<select v-model="perple.sex">
<option >男</option>
<option >女</option>
</select>
</p>
<br>
<button :class={active:a} @click="more">create</button>
<table >
<thead>
<th :class={active:a}>name</th>
<th :class={active:a}>age</th>
<th :class={active:a}>sex</th>
<th :class={active:a}>delate</th>
</thead>
<tbody>
<tr v-for="(perple,index) in people" >
<td>{{perple.name}}</td>
<td>{{perple.age}}</td>
<td>{{perple.sex}}</td>
<td :class={active:a} @click="dodo(index)">delate</td>
</tr>
</thbody>
</table>
</div>
</body>
<script src='vue.js'></script>
<script>
let fgd = new Vue({
el:'#app',
data:{
a:true,
people:[{
name:"jack",
age:"30",
sex:"delate"
},
{
name:"bill",
age:"20",
sex:"女"
},
{
name:"tracy",
age:"10",
sex:"女"
},
{
name:"chris",
age:"40",
sex:"男"
}],
perple:{
name:"12312",
age:"12312",
sex:"123123"
}
}
,
methods:{
more:function(){
this.people.push(this.perple)
},
dodo:function(index){
this.people.splice(index,1)
}
}
})
</script>
</head>//双向绑定
2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.active{
background:red;
}
</style>
<body>
<!--<div id="app">1111111
<select v-model="name">
<option selected="selected">孙悟空</option>
<option>猪八戒</option>
<option>沙和尚</option>
</select>
<p>姓名：{{name}}</p>
<p>性：{{da1}}</p>
<p>名：{{da2}}</p>
</div> -->
<!--<div id ="#app">2222222222
<select v-model="site">
<option>孙悟空</option>
<option>猪八戒</option>
<option>沙和尚</option>
</select>
<p>{{site}}</p>
<p>{{firstName}}</p>
<p>{{lastName}}</p>
</div>-->
<div id ="#app">
<select v-model="site">
<option>孙悟空</option>
<option>猪八戒</option>
<option>沙和尚</option>
</select>
<p>{{site}}</p>
<p>{{firstName}}</p>
<p>{{lastName}}</p>
</div>
</body>
<script src='vue.js'></script>
<script>
// new Vue({///11111111
// el:"#app",
// data:{
// name:'孙悟空'
// },
// computed:{//dom自动渲染。在watch 和 methods
// name(){
// return this.name;
// },
// da1(){
// return this.name.charAt(0);//截取字符串的索引值所在的（第一个字）
// },
// da2(){
// return this.name.slice(1,3);
// }
// }
// })
// new Vue({//22222222222222
// el:"#app",
// data:{
// site:"孙悟空",
// firstName:"孙",
// lastName:"悟空"
// }
// get:function(){
// firstName:site.split("")[0];
// lastName:site.split("")[1]+site.split("")[2];
// },
// set:function(newValue){
//
// }
// })
new Vue({//22222222222222
el:"#app",
data:{
site:"孙悟空",
firstName:"孙",
lastName:"悟空"
}
computed:{
name:{
get:function(){
firstName:site.split("")[0];
lastName:site.split("")[1]+site.split("")[2];
},
set:function(newValue){
}
}
}
})
</script>
</head>//下拉框
3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{list-style: none;}
.kk{
background:red;
}
li{
height: 40px;
width: 40px;
text-align:center;
line-height: 40px;
float:left;
}
</style>
<body>
</body>
<!--<div id="app">
<button @click="one" >点我</button>
<div class="kk" v-if="ok"></div>
</div>u
<!----><!--//点击出现和隐藏-->
<ul id="app">
<li v-for="items,index in num"
:class="activeIndex===index?'kk':''"
@click="select(index)" >
{{items}}</li>
</ul>
<script src='vue.js'></script>
<script>
// new Vue({
// el:"#app",
// data:{
// ok:true
// },
// methods:{
// one(){
// this.ok=!this.ok
// }
// }
// })
new Vue({
el:"#app",
data:{
num:10,
activeIndex:0
},
methods:{
select(val){
this.activeIndex=val
}
}
})
</script>
</head>//分页。和点击消失和隐藏
4：
<table id="app" cellpadding="" cellspacing="" border="">
<thead>
<tr>
<th>父循环第几次</th>
<th>子循环第几次</th>
<th>json数据的第几条</th>
<th>数值</th>
</tr>
</thead>
<tbody v-for="parent,pindex in parentList">
<tr v-for="child,cindex in parent.childList">
<td>{{pindex}}</td>
<td>{{cindex}}</td>
<td>{{child.index}}</td>
<td>{{child.childName}}</td>
</tr>
</tbody>
</table>
</body>
<script src='vue.js'></script>
<script>
new Vue({
el:"#app",
data:{
parentList: [{
childList: [{
index: 1,
childName: "第一个节点"
}, {
index: 2,
childName: "第一个节点"
}, {
index: 3,
childName: "第一个节点"
}, {
index: 4,
childName: "第一个节点"
}, {
index: 5,
childName: "第一个节点"
}]
},
{
childList: [{
index: 6,
childName: "第二个节点"
}, {
index: 7,
childName: "第二个节点"
}, {
index: 8,
childName: "第二个节点"
}, {
index: 9,
childName: "第二个节点"
}, {
index: 10,
childName: "第二个节点"
}]
},
{
childList: [{
index: 11,
childName: "第三个节点"
}, {
index: 12,
childName: "第三个节点"
}, {
index: 13,
childName: "第三个节点"
}, {
index: 14,
childName: "第三个节点"
}, {
index: 15,
childName: "第三个节点"
}]
}]
}
})
