<!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_time和update_time不为空可以解决更新记录时,create_time也被更新的毛病

  2. Python 入门之 内置模块 -- hashlib模块

    Python 入门之 内置模块 -- hashlib模块 1.hashlib 摘要算法,加密算法 (1)主要用途: <1> 加密 : md5 sha1 sha256 sha512 md5, ...

  3. python——元组方法及字符串方法

    元组方法 Tup.count():计算元组中指定元素出现的次数 Tup.count('c') Tup.index():在元组中从左到右查找指定元素,找到第一个就返回该元素的索引值 Tup.index( ...

  4. The Preliminary Contest for ICPC Asia Shanghai 2019 A. Lightning Routing I

    传送门 因为某些原因,所以我就去学了 $LCT$ 维护直径, $LCT$ 维护直径我上一个博客讲得很详细了:传送门 这里维护虚儿子用的是 $multiset$ ,没写可删堆 #include<i ...

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

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

  6. java实现spark常用算子之cartesian

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  7. 深入理解java虚拟机(1)走进jvm

    1.JDK:java程序设计语言.java虚拟机.javaAPI 二.自动内存管理机制 ----------------------------------------------------- 1. ...

  8. bat批处理的注释语句

    写bat批处理也一样,都要用到注释的功能,这是为了程式的可读性 在批处理中,段注释有一种比较常用的方法: goto start      = 可以是多行文本,可以是命令      = 可以包含重定向符 ...

  9. servlet和Struts2的线程安全性对比

    1.>在servlet中,定义成员变量是不安全的,,因为,每次请求操作的是该同一个成员变量,,会出现线程不安全的问题. 2.>而在struts2中,在Action中定义成员变量是安全的,, ...

  10. git常用命令之log

       查看提交日志记录 基础命令:  git log commit ca82a6dff817ec66f44342007202690a93763949 Author: Scott Chacon < ...