1、class的对象绑定

//对应的css

<style>

     .active {

         color: red;

     }

</style>

<!--html 对应的代码-->

<div class="container" id="mytest">

    <div class="jumbotron">

        <!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理-->

        <div :class="{active:isactive,take:'take'}" @click="change">are you ok???</div>

    </div>

</div>

//javascript对应的代码

let VM = new Vue({

     el: '#mytest',

     //对应:class里的值

     data: {isactive: false},

     methods: {

         change() {

              this.isactive = !this.isactive;

        }

     }

})

2、class的数组绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <link rel="stylesheet" href="./lib/bootstrap.css">

    <style>

        .active {

            color: red;

        }

    </style>

    <script src="./lib/vue.js"></script>

    <script>

        window.onload = function () {

            let VM = new Vue({

                el: '#mytest',

                //对应:class里的值

                data: {active: ''},

                methods: {

                    change() {

                        this.active = this.active == '' ? 'active' : ''

                    }

                }

            })

        }

    </script>

</head>

<body>

<div class="container" id="mytest">

    <div class="jumbotron">

        <!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理如下面的类test-->

        <div :class="[active,'test']" @click="change">are you ok???</div>

    </div>

</div>

</body>

</html>

3、style的对象绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <link rel="stylesheet" href="./lib/bootstrap.css">

    <style>

        .active {

            color: red;

        }

    </style>

    <script src="./lib/vue.js"></script>

    <script>

        window.onload = function () {

            let VM = new Vue({

                el: '#mytest',

                data: {

                    activeObj: {

                        color: 'black',

                        'font-size': '20px'

                    }

                },

                methods: {

                    change() {

                        this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black';

                    }

                }

            })

        }

    </script>

</head>

<body>

<div class="container" id="mytest">

    <div class="jumbotron">

        <!--用style的对象来绑定样式-->

        <div :style="activeObj" @click="change">are you ok???</div>

    </div>

</div>

</body>

</html>

4、style的数组绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <link rel="stylesheet" href="./lib/bootstrap.css">

    <style>

        .active {

            color: red;

        }

    </style>

    <script src="./lib/vue.js"></script>

    <script>

        window.onload = function () {

            let VM = new Vue({

                el: '#mytest',

                data: {

                    activeObj: {

                        color: 'black',

                        'font-size': '20px'

                    },

                    testObj:{

                        'text-decoration':'underline'

                    }

                },

                methods: {

                    change() {

                        this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black';

                    }

                }

            })

        }

    </script>

</head>

<body>

<div class="container" id="mytest">

    <div class="jumbotron">

        <!--用style的数组可以容纳多个对象,可以是vue里data的数据,也可以是行内数据,注意引号-->

        <div :style="[activeObj,testObj,{'font-weight':'bold'}]" @click="change">are you ok???</div>

    </div>

</div>

</body>

</html>

5、通过委托事件绑定实现

通过methods里的方法,第一个传值是event,那么通过event.target 或者 event.currentTarget来操作DOM实现类的切换,可结合jquery

vue 中样式的绑定的更多相关文章

  1. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  2. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  3. vue_music:排行榜rank中top-list.vue中样式的实现:class

    排行榜的歌曲列表,根据排名渲染不同的样式,同时需要考虑分辨率的2x 3x图 不同的样式--:class 考虑分辨率的2x 3x图--需要在stylu中的mixin中bgImage根据屏幕分辨率选择图片 ...

  4. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  5. vue中滚动事件绑定的函数无法调用问题

    问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...

  6. Vue中this的绑定

    之前写过一篇文章 ES6与React中this完全解惑 其实Vue也是相同的道理.在Vue的官方文档中提到: 不要在选项属性或回调上使用箭头函数,比如 created: () => consol ...

  7. Vue中v-for不绑定key会怎样

    Vue的v-for不绑定key,默认行为和绑定key="index"是差不多的,官方没有默认这种行为的情况下,会导致所有列表DOM重新渲染.key="index" ...

  8. vue中的js绑定样式

    添加class 对象形式添加   activated为true时p标签的class为activated false时为空 <div id="app"> <p :c ...

  9. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. MSSQL无法启动-原来电脑登录密码改了，重启后要设置

    Sql Server (MSSQLSERVER) 服务无法启动 - 晓菜鸟 - 博客园  http://www.cnblogs.com/52XF/p/4230578.html  --摘抄如下: 一.是 ...

  2. 二进制学习 wsample01a.exe

    有趣的二进制学习 wsample01a.exe 这是一个基础的入门小程序,点击运行后发现弹出小框,Hello! Windows 用ida静态分析程序,这一段是程序的主逻辑,也是全部逻辑:) 可以看到程 ...

  3. Deep Neural Networks for Object Detection（翻译）

    0 - Abstract 深度神经网络(DNNs)最近在图像分类任务上表现出了突出的性能.在这篇文章中,我们进一步深入探究使用DNNs进行目标检测的问题,这个问题不仅需要对物体进行分类,并且还需要对各 ...

  4. MySql 在cmd下的学习笔记 —— 有关储存过程的操作（procedure）

    我们把若干条sql封装取来,起个名字------把此过程存储在数据库中叫存储过程 调用procedure 储存过程是可以变成的,意味着可以使用变量,表达式,控制结构 来完成复杂的功能 声明变量 pro ...

  5. python第一天，简单输出及基本运算符

    1.安装步骤网上很多详细的图文资料,这里就不一一赘述. 我的环境:win7 64bit +python-3.7.0b2 2.简单的输出(3.0之后和之前的版本略有不同) 1)打开控制台输入python ...

  6. spring3.2.2 remoting HTTP invoker 实现方式

    最近跟朋友聊天,聊到他们现在项目的架构都是把数据层跟应用层分离开来,中间可以加memcached等的缓存系统,感觉挺好的,很大程度上的降低耦合,然后还明确分配了数据层跟应用层任务.也方便定位.找到问题 ...

  7. JS调用函数时候加括号与只写函数名字的区别 fn与fn()的区别

    经常见插件里面函数调用的时候只写个函数名字,不写函数参数,甚至连括号也不写,比如说: <!DOCTYPE html> <html> <head> <meta ...

  8. 【VMware vSphere】ESXi系统开启SSH协议

    写在前面:           SSH为建立在应用层基础上的安全协议,是目前较为可靠,专为远程登录会话和其他网络服务提供安全性的协议.感兴趣的话,可以百度了解           在这里,我们需要将S ...

  9. 案例一（haproxy+keepalived高可用负载均衡系统）【转】

    1.搭建环境描述: 操作系统: [root@HA-1 ~]# cat /etc/redhat-release CentOS release 6.7 (Final) 地址规划: 主机名 IP地址 集群角 ...

  10. 新版本微信导致的ios表单bug

    解决方法如下: $(document).delegate('input, textarea, select', 'blur', function(){ setTimeout(function(){ $ ...