注意:class和style的值是动态的值

1.test007.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aClass{
            color:red;
        }
        .bClass{
            color:blue;
        }
        .cClass{
            font-size: 30px;
        }
    </style>
</head>
<body>
<!--
1.理解
    在应用界面中,某个(些)元素的样式是变化的
    class/style绑定就是专门用来实现动态样式效果的技术
2.class绑定: class='xxx'
    xxx是字符串
    xxx是对象
    xxx是数组
3.style绑定
    :style="{color:activeColor,fontSize:fontSize+'px'}"
    其中activeColor/fontSize是data属性
-->
<div id="demo">
    <h2>1.class绑定:  :class='xxx'</h2>
    <p class="cClass" :class="a">xxx是字符串</p>
    <!--属性名是类名,值是布尔值;true类名留下来,false类名不留-->
    <!--<p :class="{aClass:true,bClass:false}">xxx是对象</p>-->
    <!--:class="{aClass:isA,bClass:isB}"动态绑定-->
    <p :class="{aClass:isA,bClass:isB}">xxx是对象</p>
    <!--[你想要的类名]-->
    <p :class="['aClass','cClass']">xxx是数组</p>

    <h2>2.style绑定</h2>
    <!--属性值是键值对-->
    <p :style="{color:activeColor,fontSize:fontSize+'px'}">:style="{color:activeColor,fontSize:fontSize+'px'}"</p>

    <button @click="update">更新</button>

</div>
<script text="text/javascript" src="../js/vue.js"></script>
<script>
    new Vue({
        el: '#demo',
        data:{
            a:'aClass',
            isA:true,
            isB:false,
            activeColor:'red',
            fontSize : 20
        },
        methods:{
            update(){
                this.a='bClass',
                this.isA=false,
                this.isB=true,
                    this.activeColor='green',
                    this.fontSize=30
            }
        }
    })
</script>
</body>
</html>
2.浏览器打开

点击更新按钮后:

厉害了!!!

(尚007)Vue强制绑定class和style的更多相关文章

  1. VUE v-bind绑定class和style

    1.绑定class (1)对象语法 <!DOCTYPE html> <html lang="zh"> <head> <meta chars ...

  2. vue强制绑定css3的缩放效果transfrom:scale()

    vue不提供 transfrom:scale(1.5) : 会报错 ,错误是  "TypeError: _vm.scale is not a function": 原因:Vue将其 ...

  3. Vue 样式绑定 && 条件渲染

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  4. VUE：class与style强制绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. vue.js之绑定class和style

    一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }"></di ...

  6. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  7. (尚016)Vue指令(11个自带指令+自定义指令)

    1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果 ...

  8. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  9. vue样式绑定

    vue 绑定class 和style 有相同的地方,可以是数组和对象,对于class class是真实的在css样式中添加的,只不过在元素中添加需要:class这样代表绑定,然后这个class作为对象 ...

随机推荐

  1. 【scratch3.0教程】2.1 涂鸦花朵

    第4课    涂鸦花朵 1.编程前的准备 在设计一个作品之前,必须先策划一个脚本,然后再根据脚本,收集或制作素材(图案,声音等)接着就可以启动Scratch,汇入角色,舞台,利用搭程序积木的方式编辑程 ...

  2. pip下载加速的方式

    两种方式 一.临时方式 可以在使用pip的时候加参数-i https://pypi.tuna.tsinghua.edu.cn/simple. 例如下载或者更新: 下载:pip install -i h ...

  3. UOJ269 清华集训2016 如何优雅地求和 下降幂多项式、NTT

    代码 神仙题? 看到连续的点值,那么一定是要利用到连续点值的性质,可以考虑下降幂多项式,即考虑多项式\(F(x) = \sum\limits_{i=0}^m a_ix^{\underline i}\) ...

  4. Docker3-Dockerfile创建镜像的方法（推荐docker file这种方法）

    一.镜像制作的方法 1.本地导入导出镜像 请参考:Docker 架构原理及简单使用 导出:docker save nginx >/tmp/nginx.tar.gz 导入:docker load ...

  5. MVC-08模型

    部分7:添加数据模型. MVC模型 MVC模型包含所有应用程序逻辑(业务逻辑.验证逻辑.数据访问逻辑),除了纯视图和控制器逻辑. 通过MVC,模型可保存并操作应用程序数据. Models文件夹 Mod ...

  6. 你有自信写while(true)吗？

    每次写while(true)的时候会不会心虚? 特别逻辑稍微复杂一点

  7. git 命令删除文件操作

    在github上只能删除仓库,却无法删除文件夹或文件, 所以只能通过命令来解决 1.添加文件并提交命令 2.推送到git服务器命令 3.删除文件并提交命令 4.推送到git服务器 查看下git 是否存 ...

  8. git stash 缓存本地修改 简介

    当我们在使用git的时候,又是会有这种情况:当新的需求了的时候.我们需要为此需求新建一个分支,再次分支上进行修改,当经过测试,提交代码时,在将其合并到主分支,或生产分支上. 但是有时候也有失误的时候, ...

  9. iptables-2基本语法结构

    1.规则的概念先说说规则的概念,然后再通俗的解释它.规则:根据指定的匹配条件来尝试匹配每个流经此处的报文,一旦匹配成功,则由规则后面指定的处理动作进行处理:那么我们来通俗的解释一下什么是iptable ...

  10. 高效内存池的设计方案[c语言]

    一.前言概述 本人在转发的博文<内存池的设计和实现>中,详细阐述了系统默认内存分配函数malloc/free的缺点,以及进行内存池设计的原因,在此不再赘述.通过对Nginx内存池以及< ...