请问老师我的这个第一个div为什么获取不到样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
        .c1 {
            width: 100px;
            height: 100px;
            background-color: orange;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="app" :class="{c1: isCCC}">{{msg}}</div>
   
    <div class="c1">我是DIV2</div>

    <script>
        const app = {
            data() {
                return {
                    msg: '我是msg',
                    isCCC: true
                }
            },
        }
        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>

慕粉1555086949 2022-07-11

源自：前端框架VUE3.0 2-5 v-on指令

收起

1回答

好帮手慕小小回答被采纳获得+3积分 2022-07-11 16:35:57

同学你好，同学指的是没有设置上如下样式吗？

css中是通过class选择器为元素设置的样式，.c1选择器未选择到第一个div故样式未生效。同学可以使用组合选择器设置，例如：.c1,#app{……}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
        .c1,#app {
            width: 100px;
            height: 100px;
            background-color: orange;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="app" :class="{c1: isCCC}">{{msg}}</div>
    
    <div class="c1">我是DIV2</div>
 
    <script>
        const app = {
            data() {
                return {
                    msg: '我是msg',
                    isCCC: true
                }
            },
        }
        Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

祝学习愉快~

收起回答

慕粉1555086949 提问者 #1

我这里尝试使用vue的样式绑定，将第一个div的class与c1选择器绑定，然后绑定不上。

2022-07-11 16:47:12

														好帮手慕小小
																																																								
																																																								回复
																												提问者
																																										慕粉1555086949
																																																								#2
													

同学你好，无法直接为挂载点绑定class，建议在挂载点内新增div进行测试。参考代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
    .c1 {
        width: 100px;
        height: 100px;
        background-color: orange;
        text-align: center;
        line-height: 100px;
    }
</style>
</head>
<body>
<div id="app">
    <div :class="{c1: isCCC}">{{msg}}</div>
</div>

<div class="c1">我是DIV2</div>

<script>
    const app = {
        data() {
            return {
                msg: '我是msg',
                isCCC: true
            }
        },
    }
    Vue.createApp(app).mount('#app');
</script>
</body>
</html>

官方教程：https://cn.vuejs.org/v2/guide/index.html#%E5%A3%B0%E6%98%8E%E5%BC%8F%E6%B8%B2%E6%9F%93

祝学习愉快~

2022-07-11 17:36:02