<!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. [Codeforces 1005F]Berland and the Shortest Paths(最短路树+dfs)

    [Codeforces 1005F]Berland and the Shortest Paths(最短路树+dfs) 题面 题意:给你一个无向图,1为起点,求生成树让起点到其他个点的距离最小,距离最小 ...

  2. Ubuntu下TP5隐藏入口文件

    部分内容是复制其他网友的博文,由于过了一段时间,找不到原文地址,再次表示感谢.以下是自己整理的,目的只是以后方便查阅 1.ubuntu或linux下找不到apache服务器配置文件httpd.conf ...

  3. HNUST-1148 ACM ranking rules(简单模拟)

    1148: ACM ranking rules 时间限制: 1 Sec  内存限制: 128 MB提交: 16  解决: 12[提交][状态][讨论版] 题目描述 ACM contests, like ...

  4. 下载MySQL的rpm包安装MySQL

    cd /usr/local/src wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-community-server-5.7.27-1.el ...

  5. Java获取文件的后缀名。

    /** * 详细步骤 */ private static void test1() { //获取文件的原始名称 String originalFilename = "tim.g (1).jp ...

  6. java中too many characters in character literal

    IDE里发现 too many characters in character literal 翻译过来就是 字符中的字符过多 , 一般情况是:把 多个文字 放在了 '' (单引号)里,应该放到 &q ...

  7. VMware三种连接方式bridge, nat, host-only

    大家在安装完虚拟机后,默认安装了两个虚拟网卡,VMnet1和 VMnet8,其他的未安装(当然也可以手动安装其他的).其中VMnet1是host网卡,用于host方式连接网络的.VMnet8是NAT网 ...

  8. Nginx进行UDP的负载均衡

    准备工作: 服务器1:192.168.33.102     搭建nginx服务,作为反向代理的中转站 服务器2:192.168.33.103    nginx要反向代理的服务器 一.在服务器1上搭建n ...

  9. IBM产品系列和AIX系统版本

      AIX系统版本 AIX 7.2 No supported AIX levels. AIX 7.1 Technology Level     Base Level     Recommended L ...

  10. 微信开发企业支付到银行卡PHP

    微信开发企业支付到银行卡 功能详解 不会的朋友可以加我QQ:344902511先发个微信支付官方链接你查看https://pay.weixin.qq.com/wiki/doc/api/tools/mc ...