在样式表里写的.root h1样式为什么不会让template里的发生变化?

来源:2-2 挂载点,模版与实例

慕侠3252116

2018-06-22 17:57

<!DOCTYPE html>

<html>

<head>

<title>VUE入门</title>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<style type="text/css">

.root h1{

color:red;

}

</style>

</head>

<body>

<div id="root" class="root">

</div>


<script type="text/javascript">

new Vue({

el:"#root",

template:"<h1>{{msg}}</h1>",

data:{

msg:"Hello 2332",

}

})

</script>

</body>

</html>


写回答 关注

2回答

  • 麦康福
    2018-06-22 19:56:53
    已采纳

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

    <style>

    .H1TEST{

    color:red;

    }

    </style>

    </head>

    <body>

    <div id="app"></div>

    <script>

    new Vue({

      el: '#app',

      template:'<h1 v-bind:class="classObject"> TESTVUECSS </h1>',

      data: {

        classObject: {

          H1TEST: true

        }

      }

    })

    </script>

    </body>

    </html>


  • Tobr
    2018-07-01 18:16:55

    作为模版内容,外部css代码无法改变样式

vue2.5入门

快速理解Vue编程理念上手Vue2.0开发。

146742 学习 · 657 问题

查看课程

相似问题