2021-02-20小结

日常小结

v-bind

class的绑定用法

数组用法

1.1 将样式放入到class中
1
<h2 class="active" :class="['active', 'line']">{{message}}</h2>
如果将active，line的单引号去掉，即将作为变量使用

1.2 将样式放入到方法中

<div id="app">
    <h2 :class="getClasses()">
       {{message}} 
    </h2>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: 'hello world',
            active: 'testActive',
            line: 'testLine'
        },
        methods: {
            getClasses: function () {
                return [this.active, this.line]
            }
        }
    })
</script>

字典的使用方式

2.1 将样式直接放入到class中

1	<h2 class="active" :class="{active: Boolean, line, Boolean}">{{message}}</h2>

2.2 将样式放入到方法中

<div id="app">
       <h2 :class="getClasses()">
          {{message}} 
       </h2>
   </div>
   <script>
       const app = new Vue({
           el: "#app",
           data: {
               message: 'hello world',
               active: 'testActive',
               line: 'testLine',
               isActive: true,
               isLine: true
           },
           methods: {
               getClasses: function () {
                   return {acitve: this.isActive, line: this.isLine}
               }
           }
       })
   </script>

小练习

将电影内容以列表展示
要求列表点击之后可以更换样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Test</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in movies" v-bind:class="{active: index==isActive}" v-on:click="isClicked(index)">{{item}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: '你好啊',
                movies: ['海王', '复仇者联盟', '星际穿越', '大话西游', '少年派'],
                isActive: -1
            },
            methods: {
                isClicked: function (index) {
                    this.isActive = index
                }
            },
        })
    </script>
</body>
</html>