Vue入门详解之绑定class和style样式

绑定class

绑定class两种方式第一使用对象方式,第二使用数组方式进行绑定

对象方式

    <style>
        *{
            padding:0;
            margin: 0;
        }
        .actived{
            color:hotpink;
        }
    </style>
</head>
<body>
<div id="app">
    <h1  :class="{actived:isActive}" @click="getCor">{{msg}}</h1>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            isActive:false,
            msg:"十月梦想"
        },
        mounted:function(){
            console.log(this)
        },
        methods:{
            getCor:function (){
                this.isActive=!this.isActive
            }
        }

    })
</script>

如果isActive为真这绑定这个activedclass,我们绑定了一个click事件,点击后改变这个isClick取值,我们在style中定义了这个.actived的颜色可以使用不同class显示不同颜色!除了对象方式还有其他方式绑定吗?当然有!

数组方式

除了上述的对象方式绑定,还有一种就是数字方式绑定,我们只看关键的vue代码

var app=new Vue({
    el:"#app",
    data:{
        cls1:"btn",
        cls2:"btn-lg",
        cls3:"col-md",
        actived:"actived",
        isActive:false,
        msg:"十月梦想"
    },
    mounted:function(){
        console.log(this)
    },
    methods:{
        getCor:function (){
            this.isActive=!this.isActive
        }
    }

})

对代码简单解析,和对象方式不太一样,这个数组绑定可以传入多个,这个属性来自vue实例中的data,也可以传入一个三木运算符!

直接绑定style样式

上面通过两种方式绑定了class,间接改变了css样式!我们能否直接去改变这个style样式呢?答案当然是可行的!

其实绑定style样式,也是可以通过数组和对象两种方式绑定的!

对象方式

<div id="app">
    <h2 :style="{color:cor,fz:mfz}">{{msg2}}</h2>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            cls1:"btn",
            cls2:"btn-lg",
            cls3:"col-md",
            cor:"green",
            mfz:"22px",
            msg2:"十月OctDream"
        },
        mounted:function(){
            console.log(this)
        },
        methods:{
            getCor:function (){
                this.isActive=!this.isActive
            }
        }

    })

:style直接绑定,对象内的属性来自data,data对象的属性是css属性值!还有一种直接通过数组绑定样式!

数组方式

    <h2 :style="[css1,css2]">{{msg2}}</h2>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            css1:{
              fontSize:"58px",
            },
            css2:{
                color:"purple"
            },
            cls1:"btn",
            cls2:"btn-lg",
            cls3:"col-md",
            cor:"green",
            mfz:"22px",
            actived:"actived",
            isActive:false,
            msg:"十月梦想",
            msg2:"十月OctDream"
        },
        mounted:function(){
            console.log(this)
        },
        methods:{
            getCor:function (){
                this.isActive=!this.isActive
            }
        }

    })
</script>

        可以直接在一个标签绑定多个属性对象,这个属性定义在data中,每个对象写CSS样式,但是比如font-size形式改为驼峰法fontSize:"20px",等,如果是字符串需要定义在引号中!

这样直接就绑定了CSS样式无需绑定class

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

DOM 操作写法示例

8920
来自专栏柠檬先生

VUE 入门基础(5)

五,Class 与 Style 绑定 绑定HTML class   对象语法     我们可以传给v-bind:class 一个对象,以动态的切换class  ...

20390
来自专栏Android常用基础

自定义View(四)-动画- Interpolator与Evaluator

Interpolator插值器之前我们已经接触过了,而Evaluator好像我们还没有将,这是属性动画中俩个比较中的两个知识点,弄清楚它们有助于我们更好的使用与...

21420
来自专栏老马寒门IT

03-老马jQuery教程-DOM操作(上)

在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索。目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作...

22600
来自专栏九彩拼盘的叨叨叨

学习纲要:ES6系列:箭头函数和对象方法简写

8920
来自专栏前端知识分享

第87天:HTML5中新选择器querySelector的使用

1、document.querySelector("selector"); selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回nu...

14230
来自专栏小狼的世界

CSS3 Transition介绍

CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果,通常在:hover、:focus的条件下触发。过去,为了实现这种平滑的过渡效果,我们需要借助于Fl...

10720
来自专栏zaking's

CSS(CSS3)选择器(1)

这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增...

309100
来自专栏前端知识分享

第26天:js-$id函数、焦点事件

一、函数return语句 定义函数的返回值,在函数内部用return来设置返回值,一个函数只能有一个返回值。同时,终止代码的执行。 所有自定义函数默认没有返回值...

14010
来自专栏天天

childNodes属性和nodeType属性

18740

扫码关注云+社区

领取腾讯云代金券