<!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. j2ee消息中间件

    http://blog.csdn.net/apanious/article/details/51014396

  2. Vue接口日常学习

    最近使用uni.app 进行app的开发  页面搭完之后,发现不会调接口,今天学习了下 各个程序运行时,都会发起网络请求,网络相关的API在使用之前都会在使用前配置域名白名单 首先   现在中间件上一 ...

  3. php 返回某个月的 每周几有几天

    不得不承认,这真是一个奇葩的需求,无奈写个类凑活用用. 输入日期格式或者 时间戳,返回当月有多少个周一.周二.周三.....周日; 思路就是 找到这个月有多少天,在便利判断. 稍微考虑下闰年的情况 前 ...

  4. poj 1611 简单并查集的应用

    #include<stdio.h> #define N 31000 int pre[N]; int find(int x) { if(x!=pre[x])     pre[x]=find( ...

  5. ASP.NET--identity笔记及截图

    aspnetUsers aspnetRoles aspnetUserroles aspnetUserClaims 存储用户user额外信息的键值对 aspnetUserLogins 第三方登陆的控件 ...

  6. [SharePoint2010开发入门经典]11、与Office集成

    本章概要: 1.创建office集成解决方案使用代码或非代码形式 2.使用内容类型作为能映射到文档库的文档 3.使用InfoPath管理表单 4.使用工作流管理业务流程 5.使用office2010服 ...

  7. etymology-R

    1)vor = to eat devour vt. 狼吞虎咽地吃光: 吞没,毁灭: 目不转睛地看[de-向下+vour-吃] voracity  n.贪食,贪婪.拉丁词根vor-,vorac-表示吞食 ...

  8. 在WPF的MVVM框架中获取下拉选择列表中的选中项

    文章概述: 本演示介绍怎样在WPF的MVVM框架中.通过数据绑定的方式获取下拉列表中的选中项.程序执行后的效果例如以下图所看到的: 相关下载(代码.屏幕录像):http://pan.baidu.com ...

  9. IOS-2-C语言和Objective-C语言衔接学习资料

    前言:在IOS学习中.通常会先学习一周的C语言,两周的Objective-C语言,这是今后开发的最基础最重要的部分,以下给大家分享一下培训课上的精简资料: C语言和Objective-C语言衔接学习资 ...

  10. node-webkit 屏幕截图功能

    做 IM 屏幕截图是少不了的,之前 windows 版本是调用的 qq 输入法的截图功能,这个版本又再次尝试自己实现发现是可以的,getusermedia 的权限很高,代码如下 <!DOCTYP ...