<!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. C++对象在继承情况下的内存布局

    1,C++ 中继承是非常重要的一个特性,本节课研究在继承的情形下,C++ 的对象模 型又有什么不同: 2,继承对象模型(最简单的情况下): 1,在 C++ 编译器的内部类可以理解为结构体: 2,子类是 ...

  2. Python和mysql的连接

    python与mysql的连接: 说明:前提是已近安装了mysql以及可视化工具(本人装的是Navicat) 1.在cmd下下载Python的第三方数据库包:pip install pymysql: ...

  3. Linux学习大纲（高人整理）

    1.Linux初级 1.1 OS操作系统的原理 1.2 了解常用命令 开机关机 时间管理:date cal clock 1.3 目的结构.目的管理 树形结构 tree cd 1.4 文件管理.文件查找 ...

  4. Python 入门之 内置模块 -- random模块

    Python 入门之 内置模块 -- random模块 1.random模块 import random # random -- 随机数 (1)选择1-50之间随机的整数 print(random.r ...

  5. HTTP请求报文（请求行、请求头、请求体）

    HTTP协议 1.简介 HTTP协议(Hyper Text Transfer Protocol,超文本传输协议),是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的 ...

  6. Hdu 4738【tanjan求无向图的桥】割边判定定理 dfn[x] < low[y]

    题目: 曹操在长江上建立了一些点,点之间有一些边连着.如果这些点构成的无向图变成了连通图,那么曹操就无敌了.刘备为了防止曹操变得无敌,就打算去摧毁连接曹操的点的桥.但是诸葛亮把所有炸弹都带走了,只留下 ...

  7. group by问题

    在使用group by进行查询结果分组的时候,报错: 1055 - Expression #1 of SELECT list is not in GROUP BY clause and contain ...

  8. java静态代码块、静态方法、静态变量、构造代码块、普通代码块

    一.静态代码块 1.在java类中(方法中不能存在静态代码块)使用static关键字和{}声明的代码块: public class CodeBlock{ static{ System.out.prin ...

  9. vue-注册全局过滤器

    import Vue from 'vue'; import dayjs from 'dayjs'; const filters = { formatDate(date, format = 'YYYY- ...

  10. websocket之拨云见雾

    websocket是基于http相应的特性弥补其不足(就是个socket,不再是一次请求一次相应) 但缺点就是只有在版本较高的浏览器才支持websocket. 浏览器: <script type ...