<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <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'}"

                其中activiColor/fontSize是data属性

        -->

        <div id="app">

            <h2>1.class绑定：：class='xxx'</h2>

            <p class="cClass" :class="a">xxx是字符串</p>

            <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 type="text/javascript" src="../js/vue.js" ></script>

        <script>

            new Vue({

                el:"#app",

                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>

VUE：class与style强制绑定的更多相关文章

  1. Vue.js的类Class 与属性 Style如何绑定

    Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...

  2. vue class与style绑定、条件渲染、列表渲染

    列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...

  3. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  4. vue 如何在循环中绑定v-model

    vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...

  5. 前端框架之Vue(8)-表单输入绑定

    基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...

  6. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  7. vue文件中style标签的几个标识符

    .vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由 ...

  8. 手写vue中v-bind:style效果的自定义指令

    自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...

  9. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

随机推荐

  1. ORA-12560: TNS: 协议适配器错误（oracle service 已启动）

    如果是安装完 oracle 客户端之后才出现的这个问题,请往下看 安装 oracle client 时,会配置一个客户端的监听,如果电脑上之前安装过 oracle service 就会和服务的监听冲突 ...

  2. Android学习总结（3）——Handler深入详解

    什么是Handler Handler是Android消息机制的上层接口,它为我们封装了许多底层的细节,让我们能够很方便的使用底层的消息机制.Handler的最常见应用场景之一便是通过Handler在子 ...

  3. CodeForcesGym 100641D Generalized Roman Numerals

    Generalized Roman Numerals Time Limit: 5000ms Memory Limit: 262144KB This problem will be judged on  ...

  4. HDU 2196 Computer 树形DP经典题

    链接:http://acm.hdu.edu.cn/showproblem.php? pid=2196 题意:每一个电脑都用线连接到了还有一台电脑,连接用的线有一定的长度,最后把全部电脑连成了一棵树,问 ...

  5. Class example in C/C++

    class Player {  private:   int health; //these are the attributes   int strength;   int agility;  pu ...

  6. 深刻理解Nginx之Nginx完整安装

    1.   Nginx安装 1.1预先准备 CentOS系统下,安装Nginx的库包依赖. 安装命令例如以下: sudo yum groupinstall "DevelopmentTools& ...

  7. oracle经常使用函数（2）

    1.TRIM([ { { LEADING | TRAILING | BOTH }[ trim_character ]| trim_character} FROM ]trim_source) 函数 參数 ...

  8. angularjs1-3,$apply,$watch

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Python 下的 return 关键字

    def make_sum(a, b): return ('+', a, b) >> make_sum(1, 2) ('+', 1, 2) 显示地返回一个元组(tuple),当然 retur ...

  10. 17.UNP第一章 简介

    获取时间的客户端代码: //客户端程序 #include "unp.h" int main(int argc, char **argv) { int sockfd, n; ]; s ...