vuejs
1.载入vuejs文件
2.实例化vuejs
3.如何让vuejs显示hello world
{{message}} 如果是属性就不用加双括号,直接加双引号
var app = new Vue({
// 节点的id
el:'#app',
data:{
message:'hello world111'
}
})
4.实现v-if,v-else,v-show
v-if="变量" if(变量){}
v-else="变量" else(变量){}//else和if必须成对出现,才会显示else的效果
v-show 直接显示
<div v-if="isLogin" data="if">你好万佳佳</div>
<div v-else="isLogin" data="else">你好万佳佳</div>
<div v-show="isLogin">你好万佳佳</div>
var app = new Vue({
// 节点的id
el:'#app',
data:{
isLogin:true
}
})
5.实现v-for
v-for=‘item in items’ for(items in item){}
v-for="(student,index) in students" var index=1; for(students in student){
index++:student
}
<div v-for="item in items">{{item}}</div>
<div v-for="(student,index) in students">
{{index+1}}:{{student.name}}</div>
var app = new Vue({
// 节点的id
el:'#app',
data:{
items:[25,23,32,53,26,77,85],
students:[
{name:"wanjiajia"},
{name:"wanji"},
{name:"wan"}
]
}
})