vue基础---02列表渲染
00.v-for事例1(循环语句)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 --> <div id="app"> <ul> <!-- item相当于每一项 --> <li v-for="item in stars"> {{item}} </li> </ul> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ stars:['蔡徐坤','苏有朋','李晨','范冰冰'] } }) </script> </body> </html>
01.v-for事例2(循环语句)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> 输出索引值 <h3></h3> <ul> <li v-for="item,key in student"> <h4>索引值:{{key}}--姓名:{{item.studentName}}</h4> </li> </ul><hr/> 循环输出一组数据 <ul> <li v-for="item in student[0]"> {{item}} </li> </ul><hr/> 输出value值 <ul> <li v-for="item,key in student[0]"> key:{{key}}</br> value:{{item}} </li> </ul><hr/> 输出图片 ":"代表绑定，可以理解为引用 <img :src="student[0].img"><hr/> 条件渲染和列表渲染混搭之偶数循环 <ul> <li v-for="item,key in student" v-if="item.age%2==0"> <h4>{{item.studentName}}--{{item.age}}</h4> </li> </ul> </div> <script> var app=new Vue({ el:"#app", data:{ student:[ { studentName:"小李", sex:"男", age:21, img:"https://img.lanrentuku.com/img/allimg/1211/5-121116134045.gif"//注意有引号 }, { studentName:"小李", sex:"男", age:18 }, { studentName:"小李", sex:"男", age:20 } ] } }) </script> </body> </html>
02.登陆注册
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <div v-if="isLogin" class="login" key="login">如果login页面和sign页面类似，vue就会只更改其中的变化内容，不会更改所有，为了避免这种情况，所以要添加key值 <h3>登陆</h3> <div> 用户名： <input type="text" name="username" value=""> </div> <div> 密   码： <input type="password" name="pass" value=""> </div> <button>登陆</button> </div> <div v-else class="sign"> <h3>注册</h3> <div> 用户名： <input type="text" name="zc" value=""> </div> <div> 密   码： <input type="password" name="pass" value=""> </div> </div> <button @click="togglePage" type="button">切换登陆注册</button> </div> <script> var app=new Vue({ el:"#app", data:{ isLogin:true }, methods:{ togglePage:function(){ app.isLogin=!this.isLogin; } } }) </script> </body> </html>
页面（练习）
