入门vuejs



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"}
                ]
        }


    })

猜你喜欢

转载自blog.csdn.net/qq874039013/article/details/79562687
今日推荐