首页
   /       /   
Vue学习笔记
3月
9
Vue学习笔记
作者:大彭Sir    分类: 学习笔记

v-if与v-show-v-for

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--v-if 隐藏与显示 true(显示)  false(隐藏) 删除了节点 -->
    <p v-if="flg">今天星期二</p>

</div>
</body>
</html>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            flg:false
        }
    });

</script>

v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--v-show 隐藏与显示  true(显示) fasle(隐藏)  没有删除元素 -->
    <p v-show="flg">今天星期二</p>
    <!--
        v-if  与 v-show区别
        1.相同点:都可以实现隐藏与显示
        2.不同点: v-if 隐藏之后 删除元素  v-show隐藏没有删除元素,只是添加了一个样式
    -->
</div>
</body>
</html>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            flg:false
        }
    });

</script>

v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--v-if 和 v-else一起使用  注意:  -->
    <p>年龄如果大于等于18,显示成年人,否则显示未成年人</p>
    <p v-if="age>=18">成年人</p>
    <p v-else>未成年</p>

</div>

</body>
</html>
<script>
    var app=new  Vue({
        el:"#app",
        data:{
            age:10
        }
    });

</script>

v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>1.需求:判断考试的成绩,成绩>=90 优秀  >=80良好 >=60 还行 否则 不及格</p>
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=80">良好</p>
    <p v-else-if="score>=60">还行</p>
    <p v-else>不及格</p>

    <hr/>
    <p>在数据库中性别 一般用 0(女) 和 表示1(男)</p>
    <p v-if="sex==1">男</p>
    <p v-if="sex==0">女</p>
</div>
</body>
</html>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            score:66,
            sex:1
        }
    });
</script>

v-for

循环 数组 对象 字符串 整数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
    <script src="js/vue.js"></script>
    <!--
        1.v-for 可以循环 数组  对象  字符串 整数
    -->
</head>
<body>
<div id="app">
    <p style="background-color: pink;height: 40px">1.遍历的是数组</p>
    <ul>
        <!--stu(遍历出来的数据给他) in studnets(需要遍历的数据)-->
        <li v-for="stu in studnets">{{stu.name}}=={{stu.age}}</li>
    </ul>
    <p style="background-color: pink;height: 40px">2.遍历的是对象</p>
    <ul>
        <li v-for="p in people">{{p}}</li>
    </ul>

    <p style="background-color: pink;height: 40px">3.遍历的是字符串</p>
    <ul>
        <li v-for="s in str">{{s}}</li>
    </ul>

    <p style="background-color: pink;height: 40px">4.遍历的是整数</p>
    <button v-for="number in 5">第{{number}}页</button>
</div>

</body>
</html>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            studnets:[
                {"name":"小刚1","age":18},
                {"name":"小刚2","age":16}
            ],
            people:{"name":"王明阳","age":33},
            str:"我爱我的祖国"

        }
    });

</script>

v-for有两个参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>1.遍历的数组 参数1 遍历出来的数据  参数2 对象索引</p>
    <ul>
        <li v-for="(value,index) in studnets">
            {{index+1}}、{{value.name}}
        </li>
    </ul>

    <p>2.遍历是对象 参数1 遍历出来的数据  参数2属性的名称</p>
    <ul>
        <li v-for="(value,key) in people">
            {{value}}
        </li>
    </ul>
</div>
</body>
</html>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            studnets: [
                {"name": "小刚1", "age": 18},
                {"name": "小刚2", "age": 16}
            ],
            people:{"name":"小非","age":18}
        }

    });

</script>
本文标签:标签: VUE 前端
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录