zoukankan      html  css  js  c++  java
  • 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>&nbsp&nbsp&nbsp码:
                    <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>&nbsp&nbsp&nbsp码:
                    <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>

    页面(练习)

  • 相关阅读:
    C#_基础_继承以及关键字new(二十一)
    C#_基础_静态关键字static(二十一)
    C#_基础_密封类和密封方法关键字sealed(二十)
    C#_基础_多线程(十九)
    C#_基础_部分类partial(十八)
    C#_基础_文件夹操作类Directory(十七)
    C#_基础_简单实现自定义异常(十六)
    C#_基础_String和StringBuilder及字符串常用方法(十五)
    C#基础_递归方法几个示例(十四)
    C#_基础_关键字可变参数Param(十三)
  • 原文地址:https://www.cnblogs.com/hunter1/p/15250682.html
Copyright © 2011-2022 走看看