<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
<style>
.divider{
width:10px;
height: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<ol>
<li v-for="(item,index) in items" :key="item.id">{{parentMessage}}-{{index}}-{{item.text}}</li>
</ol>
</div>
<ul id="app2">
<li v-for="(value,key,index) in object">{{index}}、{{key}}:{{value}}</li>
</ul>
<div id="app3">
<ol>
<!-- <li v-for="n in evenNumbers">{{n}}</li> -->
<li v-for="n in event(numbers)">{{n}}</li>
</ol>
</div>
<div id="app4">
<ol>
<li v-for="n in 10">{{n}}</li>
</ol>
</div>
<ul id="app5">
<template v-for="item in items" v-if="item.isShow">
<li>{{item.msg}}</li>
<li v-bind:class="{divider:isdivider}"></li>
</template>
</ul>
<script>
var vm=new Vue({
el:"#app",
data:{
parentMessage:"Parent",
items:[
{text:'刺客信条',id:"1"},
{text:'使命召唤',id:"2"},
]
}
})
var app2=new Vue({
el:"#app2",
data:{
object:{
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
//Vue不能直接修改数组项的值与修改数组的长度
//设置数组项值的办法
Vue.set(vm.items,1,{text:'守望先锋',id:"3"});
//改变数组项目数的办法
vm.items.splice(2,0,{text:'情感漂泊',id:"4"});
//Vue 不能检测对象属性的添加或删除
Vue.set(app2.object,"birthday","1/20");
app2.object=Object.assign({},app2.object,{
contray:"china",
})
//显示过了排序
var app3=new Vue({
el:"#app3",
data:{
numbers: [ 1, 2, 3, 4, 5 ],
},
// computed:{
// evenNumbers:function(){
// return this.numbers.filter(function(number){
// return number%2===0;
// })
// }
// }
methods:{
event:function(numbers){
return this.numbers.filter(function(number){
return number%2===0;
})
}
}
})
var app4=new Vue({
el:"#app4",
})
var app5=new Vue({
el:"#app5",
data:{
isdivider:true,
items:[
{msg:"火遁",isShow:true},
{msg:"土遁",isShow:false},
{msg:"风遁",isShow:true},
]
}
})
</script>
</body>
</html>
