Vue的第六日|柠零的博客中心

绑定class样式

核心：正常的样式正常写，变化的样式用绑定的形式去写

    <style>

        .basic{}

        .normal{}        

    </style>

    <div class="basic":class="a" @click="changeMood">{{name}}</div>

    //这里：a就是变化的样式，交给vue去保管

    new Vue({

        data:{

            a:'normal'

        }

    })

basic 和代表a的normal组合到了一起，形成了最终的样式

:class------>v-bind:class绑定，字符串写法，适用于：样式的类名不确定，需要动态指定

不加冒号就是从外部class样式中进行寻找，加上冒号使用了vue指令，vue就会介入进行操作，并且右侧变成了一个表达式

绑定还可以用数组进行绑定，适用于要绑定的样式个数不确定，名字也不确定的情况

    <style>

        .sty1{}

        .sty2{}

        .sty3{}        

    </style>

    <div class="basic":class="arr" @click="changeMood">{{name}}</div>


    const vm = new Vue({

        data:{

            // arr:['sty1','sty2','sty3']

            // 此时数组里面放多少个样式，那么就会执行多少个样式，此时并没有任何限制

        }

    })

使用对象进行绑定，sty1对应false就是不启用sty1的样式，适用于要绑定的样式个数确定，名字也确定，但是要动态决定

    <style>

        .sty1{}

        .sty2{}

        .sty3{}        

    </style>

    <div class="basic":class="classObj" @click="changeMood">{{name}}</div>

    

    const vm = new Vue({

        data:{

            classObj:{

                sty1:false,

                sty2:false,

            }

        }

    })

绑定style样式：

这是没有交给vue管理的，要管理的部分：40px，40px需要动态指定

    <style>

        .sty1{}

        .sty2{}

        .sty3{}        

    </style>

    <div class="basic" style="font-size:40px;">{{name}}</div>

    <style>

        .sty1{}

        .sty2{}

        .sty3{}        

    </style>

    <div class="basic" :style="{fontSize:fsize+'px'}">{{name}}</div>

    

    new Vue({

        data:{

            fsize:40

        }   

    })

style对应的样式也是有键值对的，如果想要动态绑定，则需要写成对象形式

完整格式：{fontSize:fsize+'px'}

font-size发生改变，也不是fsizepx，而是fsize + 'px'

最终格式：使用对象进行绑定

    <style>

        .sty1{}

        .sty2{}

        .sty3{}        

    </style>

    <div class="basic" :style="styleObj">{{name}}</div>

    

    new Vue({

        data:{

            styleObj:{

                //前面的key不能乱写，因为原css中有font-size所以才能写成fontSize

                fontSize:'40px'

            }

        }   

    })

总结：

绑定样式：

class样式：

写法：:class="xxx" xxx可以是字符串，对象，数组

style样式

写法：:style="{fontSize:xxx}" 其中xxx是动态值

:style="[a,b]"其中a,b是样式对象

条件渲染：你符合了某些条件，就给你渲染一些东西

v-show 简洁明了，后面跟随的是布尔值，根据真假决定是否显示该元素

    <h2 v-show="a">欢迎来到{{name}}</h2>

    new Vue({

        el: "#root",

        data: {

            name: "柠"

            a:"false"

        }

    })

这里还展示出vue会去data中寻找的特性

v-if 指令：也是跟随布尔值，但和v-show不同的是，当设置为false时，在控制台连任何结构都不可见了

v-else-if 指令/v-else指令：就是分支结构，不允许打断

<template>在不破坏结构的情况下完成条件渲染，但只能和v-if配合使用

    <template v-if="n===1">

        <h2>Hello</h2>

    </template>

在浏览器中查看源码可以发现并没有外层的template

最终源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>你好啊！</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2 v-show="false">欢迎来到{{name}}</h2>
        <h2>当前的n值是{{n}}</h2>
        <button @click="numberlogic">点我,n+1</button>
        <h2 v-show="this.n>=3">恭喜你点到了第3下</h2>
        <h2 v-show="this.n>=5">恭喜你点到了第5下</h2>
        <h2 v-show="this.n>=7">恭喜你点到了第7下</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                name: "柠",
                n:0
            },
            methods:{
                numberlogic(){
                    this.n++
                }
            }
        })
    </script>
</body>

</html>

列表渲染：基础

你想生成多个谁，就往谁身上放：v-for，Vue帮你做循环

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>你好啊！</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>

<body>
    <div id="root">
        <ul>
            <!-- :key="p.id"表示，让每一个li都有了每一个唯一的标识 -->
             <!-- 
                这种方法也可以实现,使用遍历数组得到的索引值作为唯一标识
                <li v-for="(p,index) in personList" :key="index">
             -->
            <li v-for="p in personList" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

        <ul>
            <li v-for="(value,key) in car":key="key">
                {{key}}-{{value}}
                <!-- {{a}}-{{b}} -->
                <!-- 在这里a是value，b是key；与键值对表示相反 -->
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                // 遍历数组是最多的
                personList:[
                    { id: '001', name: '张三', age: 18 },
                    { id: '002', name: '老李', age: 19 },
                    { id: '003', name: '王五', age: 20 },
                ],
                //v-for还能够遍历对象和字符串
                car:{
                    name:"赵六",
                    age:"22",
                    clothes:"外套"
                }
            }
        })
    </script>
</body>

</html>