<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="app">

            <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">好好学习</div>

            <div v-bind:style="styleObject">天天向上</div>

        </div>

    </body>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                activeColor: 'blue',

                fontSize: 30,

                styleObject: {

                    color: 'green',

                    fontSize: '50px'

                }

            }

        })

    </script>

</html>

效果：

Vue 使用v-bind:style 绑定样式的更多相关文章

  1. vue基础——Class与Style绑定

    Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...

  2. vue 的 Class 与 Style 绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...

  3. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  4. 前端框架之Vue(4)-Class与Style绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将  ...

  5. vue基础---Class 与 Style 绑定

    [一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...

  6. vue中,class与style绑定

    <template> <div> <p v-bind:class="{active:isActive,'demo':Demo}">嘿嘿</ ...

  7. vue中的js绑定样式

    添加class 对象形式添加   activated为true时p标签的class为activated false时为空 <div id="app"> <p :c ...

  8. Vue.js-----轻量高效的MVVM框架（六、Class与Style绑定）

    这个相对来说简单,看一遍代码就懂. 一.完整片段: <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  9. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

随机推荐

  1. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  2. node.js 设置静态文件托管

    1.在app.js文件中设置静态文件托管 /*应用程序入口文件*/ /*加载express模块*/ var express = require('express'); /*加载模板处理模块*/ var ...

  3. Flask开发系列之快速入门

    Flask开发系列之快速入门 文档 一个最小的应用 调试模式 路由 变量规则 构造 URL HTTP 方法 静态文件 模板渲染 访问请求数据 环境局部变量 请求对象 文件上传 Cookies 重定向和 ...

  4. Uber回馈开源的一些软件

    AresDB AresDB 是 Uber 开源的一个基于 GPU 运算的实时分析存储引擎和查询引擎.具备低查询延迟.高数据刷新率和高效内存和磁盘存储管理.AresDB 要求 CUDA Toolkit ...

  5. mariadb索引、视图、关联查询、备份恢复、外键

    连接查询(两张表关联查询) 在sql语句中,- - 代表注释 内关联查询(查询两张表的交集) select * from 表1 inner join 表2 on 表1.id=表2.id(此处id是表1 ...

  6. GPT-2，吓坏创造者的「深度造假写手」

    简评: 今年二月份刷屏的 GPT-2 着实厉害,那个生成续写故事的例子更是效果好到吓人一跳,它到底有多厉害,本文略微讲讲.更详细的信息可参考文末 OpenAI 的博客链接. 你能从下面这两段文字里品味 ...

  7. Linux日常之命令sort

    素材借鉴:https://www.cnblogs.com/51linux/archive/2012/05/23/2515299.html 命令sort 是Linux中常用的排序命令,属于管道命令. 常 ...

  8. 牛客练习赛26B 烟花 （概率DP）

    链接:https://ac.nowcoder.com/acm/contest/180/B 来源:牛客网 烟花 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5 ...

  9. 安装BCG界面库 会导致vs2013qt库配置消失

    安装BCG界面库 会导致vs2013qt库配置消失 安装BCG界面库 会导致vs2013qt库配置消失 安装BCG界面库 会导致vs2013qt库配置消失

  10. 十二、S3C2440 裸机 — SDRAM

    12.1 SDRAM 介绍 12.1.1 SDRAM 定义 SDRAM(Synchronous Dynamic Random Access Memory):同步动态随机存储器-内存条 同步是指内存工作 ...