动态修改class与style

VUE vue

创建时间:2019-12-01 12:02

字数:293 阅读:

语法格式

语法格式

v-bind:class=”表达式”或:class=”表达式”
- 表达式可以是：
  - 字符串 :class=”activeClass”，activeClass是data中定义的属性
  - 对象 :class=”{active:isActive}”, active是样式名称，isActive是data中定义的属性取值为[true|false],代表是否应用
  - 列表 :class=”[‘active’,’error’]”, active,error都是样式名称表示同时应用这些名称
v-bind:style=”表达式”或:class=”表达式”
- style的表达式一般为对象
  
  :style=”{color: colorStr,fontSize: fountSize+’px’}”

<body>
    <div id="app">
        样式一：<span v-bind:class="activeClass">Hello,World</span><br>
        样式二：<span v-bind:class="{active:isActive,error:isError}">Hello,World</span><br>
        样式三<span v-bind:cass="['delete','error']">Hello,World</span><br>
        <!--fontSize代表font-size属性，backgroundColor代表background-color
        就是说如果属性名称中有连字符"-"的要去掉"-"后面的单词首字符大写-->
        style样式<span v-bind:style="{color: colorStr,fontSize: fontSize+'px',backgroundColor:bgcolor}">Hello,World</span>

    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                activeClass: "active",
                isActive:true,
                isError:true,
                colorStr:"yellow",
                fontSize:50,
                bgcolor:'blue'
            }
        })
    </script>
</body>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com