<!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. Java基础学习总结（63）——Java集合总结

    数据结构是以某种形式将数据组织在一起的集合,它不仅存储数据,还支持访问和处理数据的操作.Java提供了几个能有效地组织和操作数据的数据结构,这些数据结构通常称为Java集合框架.在平常的学习开发中,灵 ...

  2. 工具-VS CODE快捷键

    快捷键 Ctrl+P 通过文件名或者标签名导航 Ctrl+Tab  在前一个文件和当前文件间切换 F1       打开全局命令 Ctrl+Shift+O will let you navigate ...

  3. 工具-VS CODE安装

    在Linux下的安装 1.下载tar.gz文件包, 2.要注意加一条命令,这样在任何目录下就可以使用code .直接启动应用程序了 1 sudo ln -s /path/to/vscode/Code ...

  4. [SharePoint][SharePoint Designer 入门经典]Chapter13 客户端Silverlight编程

    1.使用Silverlight,CAML和Linq取得数据 2.编程性创建更新删除列表数据项 3.修饰列表和库的配置 4.管理文件和文件夹 5.修改快速启动和顶部导航条 [使用Silverlight, ...

  5. [Performance] Optimize Paint and Composite for the website

    "Paint" is one of the most preference killer, it can easily cost more than 60fps, and once ...

  6. Codeforces 570D TREE REQUESTS dfs序+树状数组

    链接 题解链接:点击打开链接 题意: 给定n个点的树.m个询问 以下n-1个数给出每一个点的父节点,1是root 每一个点有一个字母 以下n个小写字母给出每一个点的字母. 以下m行给出询问: 询问形如 ...

  7. 【Android 应用开发】Android 平台 HTTP网速測试 案例 API 分析

    作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/25996817 工信部规定的网速測试标准 : 除普通网页測速 ...

  8. Java笔试面试题001

    Java笔试面试题之中的一个 1.Struts1中actionform和action属于MVC哪一层,为什么? 解答:actionform和action属于MVC的Model层,Action用来处理业 ...

  9. cocos2dx --- 在游戏中显示HTML页面

    前文介绍了简单的富文本组件RichText,如今我们来了解下由freeType库做出来的第三方组件.可以直接显示html页面,而且可以实现超链接.和触摸事情. 步骤: 1.在github中  下载  ...

  10. angular 兼容ie11 ie11兼容

    兼容一(new Date()用法) new Date('2018-01-01 00:00:00').getHours(); new Date('2018-01-01 00:00:00').getMin ...