<!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. Django入门--模板路径配置及渲染

    模板就是前端的页面,Django把html源码写到模板文件中,然后通过特定方法渲染后交给客户端. 模板路径设置方法有两种,分别是在项目目录下设置以及在应用目录下设置. 模板查找顺序:优先在DIRS设置 ...

  2. css下背景渐变与底部固定的蓝天白云

    <?php defined('_JEXEC') or die; JHtml::_('behavior.framework', true); //if(!$templateparams->g ...

  3. cogs 306. [SGOI] 糊涂的记者

    306. [SGOI] 糊涂的记者 ★★★   输入文件:sign.in   输出文件:sign.out   评测插件时间限制:1 s   内存限制:128 MB [问题描述] 在如今的信息社会中,时 ...

  4. HDU 4352

    #include <iostream> #include <cstdio> #include <cmath> #include <string.h> # ...

  5. UVA 10196 Morning Walk（欧拉回路）

    Problem H Morning Walk Time Limit 3 Seconds Kamalis a Motashotaguy. He has got a new job in Chittago ...

  6. emacs使用本地emacs server模式打开远程文件

    使用emacs的用户都知道,一般要打开远程机器上的文件要使用TrampMode模式,调用方式例如以下: C-x C-f /remotehost:filename RET (or /method:use ...

  7. C语言的长处和缺点

     C语言的长处和缺点 C语言的长处: 1.面向过程的语言C语言是面向过程的语言,在这里用户创建过程或函数来运行他们的任务. 面向过程的语言是非常easy学.因为它遵循的算法来运行你的语句.要使用面 ...

  8. 在外星人电脑上安装windows10和ubuntu16.04双系统小记

    最近刚刚入手了一台Alienware Aurora R6,买这货的主要目的是为了研究Deep Learning.之所以没有买组装机的原因,主要是担心组装机的不稳定,而实验经费中的设备费也还相对充足,于 ...

  9. 剑指offer——04重建二叉树（Python3）

    思路:在数据结构中,有一个条件反射,谈及二叉树,就递归.所以在实现重建二叉树时,也应该用到递归的思想. 在前序遍历中,根节点处于第一个:在中序遍历中,根节点的左边为左子树节点,根节点右边为右子树节点. ...

  10. C#中显现串口通信SerialPort类

    SerialPort类的常用属性 名 称 说 明 BaseStream 获取 SerialPort 对象的基础 Stream 对象 BaudRate 获取或设置串行波特率 BreakState 获取或 ...