vue学习笔记(v-if v-else v-show v-for)-panda

Posted Vivianluolita

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue学习笔记(v-if v-else v-show v-for)-panda相关的知识,希望对你有一定的参考价值。

第一季 vue基本指令

v-if v-else v-show

<h1>v-if v-else v-show</h1>
    <div id="app">
        <div v-if='islogin'>你好 lee</div>
        <div v-else>请登录</div>
        <div v-show='isshow'>你好 v-show</div>
    </div>
    <script type="text/javascript">
        var app= new Vue(
            el:'#app',
            data:
                islogin:true,
                isshow:true  
                //if else
            
        )
    </script>

v-if 和v-show的区别:
v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
v-show:调整css dispaly属性,可以使客户端操作更加流畅。

快捷键:art+shift+下箭头 :复制一行

v-for
v-for指令是循环渲染一组data中的数组,v-for 指令需要以 item in items 形式的特殊语法,items 是源数据数组并且item是数组元素迭代的别名。哪里需要循环就把v-for放哪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>V-for 案例</title>
</head>
<body>
    <h1>v-for指令用法</h1>
    <hr>
    <div id="app">
       <ul>
           <li v-for="item in items">
                item
           </li>
       </ul>
    </div>

    <script type="text/javascript">
        var app=new Vue(
            el:'#app',
            data:
                items:[20,23,18,65,32,19,54,56,41]
            
        )
    </script>
</body>
</html>

排序:在输出item前进行编程
(1)对属性的保护机制

computed:
                Items:function()
                    return this.items
                
            ```
正确的


computed:
                Items:function()
                    return this.items.sort()
                
            
错误的

我们在computed里新声明了一个对象sortItems,如果不重新声明会污染原来的数据源,这是Vue不允许的,所以你要重新声明一个对象。

 computed:
                ItemsSort:function()
                    return this.items.sort();
            
                  

v-for处也要将items改写

(2)

<body>
    <h1>v-for</h1>
    <div id="app">
        <ul>
            <li v-for='item in itemsSort'>item</li>
        </ul>
    </div>
    <script type="text/javascript">
        var app= new Vue(
            el:'#app',
            data:
                items:[22,33,44,55,666,77]
            ,
            computed:
                itemsSort:function()
                    return this.items.sort(sortNumber);
            ,

              
        )
        function sortNumber(a,b)
                    return a-b
                
    </script>
</body>

输出对象形式

<h1>v-for</h1>
    <div id="app">
        <ul>
            <li v-for='item in itemsSort'>item</li>
        </ul>

        <ul>
            <li v-for='(student,index) in students'>indexstudent.name-student.age</li>
        </ul>

    </div>
    <script type="text/javascript">
        var app= new Vue(
            el:'#app',
            data:
                items:[22,33,44,55,666,77],
                students:[
                    name:"liyj",age:"22",
                    name:"lihj",age:"23",
                    name:"lihj",age:"23",
                    name:"zjh",age:"24"
                ]
            ,
            computed:
                itemsSort:function()
                    return this.items.sort(sortNumber);
            ,

              
        )
        function sortNumber(a,b)
                    return a-b
                
    </script>

对数组进行排序

<h1>v-for</h1>
    <div id="app">
        <ul>
            <li v-for='item in itemsSort'>item</li>
        </ul>
        <!-- 对象被重写 -->
        <ul>
            <li v-for='(student,index) in sortStudent'>indexstudent.name-student.age</li>
        </ul>

    </div>
    <script type="text/javascript">
        var app= new Vue(
            el:'#app',
            data:
                items:[22,33,44,55,666,77],
                students:[
                    name:"liyj",age:"22",
                    name:"lihj",age:"23",
                    name:"lihj",age:"23",
                    name:"zjh",age:"21"
                ]
            ,
            computed:
                itemsSort:function()
                    return this.items.sort(sortNumber);
            ,
            // 数组方法被改写
                sortStudent:function()
                    return sortByKey(this.students,'age');
            

              
        )
        function sortNumber(a,b)
                    return a-b
                
        //数组对象方法排序:
        function sortByKey(array,key)
            return array.sort(function(a,b)
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        );
                
    </script>

以上是关于vue学习笔记(v-if v-else v-show v-for)-panda的主要内容,如果未能解决你的问题,请参考以下文章

Vue入门笔记--基础部分之条件渲染

B站学习Vue入门笔记

vue条件渲染 v-if v-else

Vue风格指南 - v-if/v-else-if/v-else下的key

[Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)

Vue js:使用 v-if 和 v-else 语句更改 CSS