VUE3（三）v-bind和v-on

v-bind绑定class的对象语法

    <template id="my-app">
        <!-- 对象语法，传入一个对象 -->
        <div :class="{'active':isActive}">啊啊啊</div>
        <button @click="toggle">切换</button>
        <!-- 也可以有多个键值对 -->
        <div :class="{'active':isActive, title:true}">啊啊啊</div>
        <!-- 默认class和动态class相结合 -->
        <div class="abc cba" :class="{'active':isActive, title:true, title:true}">啊啊啊</div>
        <!-- 将对象放到一个单独的属性中 -->
        <div :class="classObj">啊啊啊</div>
        <!-- 将对象放到一个methods的方法中 -->
        <div :class="getClassObj()">啊啊啊</div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    message: "hello world",
                    isActive: true,
                    classObj: {'active':true, title:true}
                }
            },
            methods:{
                toggle(){
                    this.isActive=!this.isActive;
                },
                getClassObj(){
                    return {'active':true, title:true};
                }
            }
        };
        Vue.createApp(app).mount("#app");
    </script>