<!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. PostgreSQL-优化之分表

    分表概述 数据库分表,就是把一张表分成多张表,物理上虽然分开了,逻辑上彼此仍有联系. 分表有两种方式:水平分表,即按列分开:垂直分表,即按行分开 优势 1. 查询速度大幅提升 2. 删除数据速度更快 ...

  2. [Wpf]在C#中添加 collectionViewSource

    Products = new ObservableCollection<Product>(products); ProductOptions = new ObservableCollect ...

  3. 07.AutoMapper 之列表和数组(Lists and Arrays)

    https://www.jianshu.com/p/419a3b7f12d5 列表和数组(Lists and Arrays) AutoMapper只需要配置元素类型的映射配置,不需要针对列表和数组进行 ...

  4. 剑指offer-1：旋转数组的最小数字

    旋转数组的最小数字1.题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2 ...

  5. echarts 给legend图例加个标题式文字设置为普通文本不可点击

    legend: [ { orient: "horizontal", // 'vertical' x: "68%", // 'center' | 'left' | ...

  6. iOS常用的数学函数

    1. 三角函数    double sin (double);正弦    double cos (double);余弦    double tan (double);正切    2 .反三角函数    ...

  7. 绕过CDN找到真实IP

    现在很多大型企业都会使用CDN内容分发网络,因为CDN存在多个缓存服务点,而且会根据用户IP地址,将用户请求导向到最近的服务点上进行相应,所以得不到主服务站点的ip地址,总结学习一下绕过CDN找到真实 ...

  8. 批量恢复zencart产品表所属分类master_categories_id为0的产品

    批量恢复zencart产品表所属分类master_categories_id为0的产品 将下面代码保存为master_categories_id.php,上传到网站根目录运行即可,操作前先备份数据库 ...

  9. python算法（一）基本知识&冒泡排序&选择排序&插入排序

    本节内容: 算法基本知识 冒泡排序 选择排序 插入排序 1. 算法基本知识 1.1 什么是算法? 算法(algorithm):就是定义良好的计算过程,他取一个或一组的值为输入,并产生出一个或一组值作为 ...

  10. AI换脸教程：DeepFaceLab使用教程（2.训练及合成）

    如果前期工作已经准备完毕(DeepFaceLab下载(https://www.deepfacelabs.com/list-5-1.html),然后安装相应的显卡驱动,DeepFaceLab使用教程(1 ...