<!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. 【Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2) D】The Wu

    [链接] 我是链接,点我呀:) [题意] 给你n个字符串放在multiset中. 这些字符串都是长度为m的01串. 然后给你q个询问 s,k 问你set中存在多少个字符串t 使得∑(t[i]==s[i ...

  2. MySQL 函数大全及用法示例

    1.字符串函数ascii(str)   返回字符串str的第一个字符的ascii值(str是空串时返回0)  mysql> select ascii('2');  -> 50  mysql ...

  3. Hdu 4280 Island Transport（最大流）

    Island Transport Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  4. h5-注册成功

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdUAAAGnCAIAAABuMVpqAAAgAElEQVR4nOy9eXQTd57om2R6uvtO3z ...

  5. bzoj2806: [Ctsc2012]Cheat(SAM+DP)

    2806: [Ctsc2012]Cheat 题目:传送门 题解: 感觉这题考的更多的就是DP啊... 看完题目的第一反应就是广义SAM...(然而并不会) 再YY一会儿想起来可以直接将作文库连成一个母 ...

  6. Swift - 使用CollectionView实现图片Gallery画廊效果（左右滑动浏览图片）

    1,效果图 (1)图片从左至右横向排列(只有一行),通过手指拖动可以前后浏览图片. (2)视图滚动时,每张图片根据其与屏幕中心距离的不同,显示尺寸也会相应地变化.越靠近屏幕中心尺寸就越大,远离屏幕中心 ...

  7. 英语发音规则---T字母

    英语发音规则---T字母 一.总结 一句话总结: 1.T一般发[t]? ten [ten] num.十 letter [ˈletə(r)] n.信; 证书 meet [mi:t] vt.& v ...

  8. Linux性能优化和监控系列(一)——top工具

    解释服务器发生了什么——top工具 在检查服务器的详细工作性能状态前,系统管理员需要对当前服务器状态有总体的了解. top是检查服务器总体状态的强有力工具, 通过top可以获取CPU, Memory, ...

  9. JSTL中的常用EL函数（fn:contains(str,subStr)）

    转自:https://blog.csdn.net/u012843873/article/details/53289238 ① fn:toLowerCase ④fn:length fn:length函数 ...

  10. 基于macOS+VMware的GNS3内VM上公网

    笔者经常需要做网络实验,GNS3就是笔者最喜欢用的模拟器,为了便于实验,需要能从macos上直接ssh登陆模拟出来的vm,并且vm需要上公网.经过研究,已解决此问题,并以此分享出来 tag: maco ...