<!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. mysql联合索引如何创建

    例如: CREATE TABLE `test` ('aaa' varchar(16) NOT NULL default '', 'bbb' varchar(16) NOT NULL default ' ...

  2. ReactNative: Android与iOS平台兼容处理

    方法一: 创建不同的文件扩展名:*.android.js*.io.js 方法二: import { Platform } from 'react-native'; if (Platform.OS == ...

  3. 【三】Django模版的使用

    作为Web框架,Django提供了模板,可以很便利的动态生成HTML 模版系统致力于表达外观,而不是程序逻辑 模板的设计实现了业务逻辑(view)与显示内容(template)的分离,一个视图可以使用 ...

  4. 生成二维码（java后端）

    需要引入2个jar包: <dependency> <groupId>com.google.zxing</groupId> <artifactId>jav ...

  5. 生产服务器上安装Python

    2018-05-17 生产环境的服务器(以下简称内网服务器)由于安全限制,可能无法连接外网.这种情况下将无法直接使用pip命令安装python的包 一.更改pip源 - 默认pip是使用Python官 ...

  6. Python 列表元素里面含有字典或者列表进行排序

    示例1:列表里面含有列表进行排序 s = [[1, 2], [100, 2], [33, 3], [25, 6]] s.sort(key=lambda k: k[0]) print(s) 结果: [[ ...

  7. 硬盘安装ubuntu遇到的问题

    终于把这个系统给装上了,陆陆续续弄了4,5天(崩溃...),一直一来都是用U盘来装ubuntu的,挺简单的,但是这个主机识别不了U盘不知道为什么...这个问题又是百度又是Google最终找不到原因只好 ...

  8. 专心研发CPU？传Intel外包芯片组设计给祥硕

    在本届台北电脑展上,AMD除了推出7nm锐龙3000处理器之外,还发布了新一代平台X570芯片组,首发了消费级PCIe 4.0技术支持.X570芯片组因为技术难度更高,所以这一代是AMD亲自出手设计研 ...

  9. multi gpu inference with tfserving or keras

    在tfserving上,目测只能在每个gpu上起docker    https://github.com/tensorflow/serving/issues/311#issuecomment-4801 ...

  10. Android开发艺术探索笔记之Activity

    内容来源:Android开发艺术探索第一章:Activity的生命周期与启动模式 不能在onPause中做重量级的操作,因为必须执行完成以后新Activity才能Resume.onPause和onSt ...