一共用到了两种方式:

第一种:对象

第二种:数组

看代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js 多种方式控制class属性 </title>

    <script src="vue.js"></script>

    <script src="node_modules/axios/dist/axios.js"></script>

    <script src="node_modules/lodash/lodash.js"></script>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <h1 :style="{color:red,fontSize:size+'px'}">简单记录</h1>

    <input type="text" v-model="size">

    <h1 :style="style">简单记录</h1>

    <h1 :style="[mykeji]">简单记录</h1>

</div>

<script>

    var app = new Vue({ //实例化vue

        el:'#ask',//vue控制id为ask的元素,

        data:{

            red:'green',

            size:16,

            style:{

                color:'blue',

                fontSize:'200px'

            },

            mykeji:{

                color:'red',

                fontSize:'100px'

            }

        },

    });

</script>

</body>

</html>

vue 多种方式控制style属性的更多相关文章

  1. Spring实现Ioc的多种方式--控制反转、依赖注入、xml配置的方式实现IoC、对象作用域

    Spring实现Ioc的多种方式 一.IoC基础 1.1.概念: 1.IoC 控制反转(Inversion of Control) IoC是一种设计思想. 2.DI 依赖注入 依赖注入是实现IoC的一 ...

  2. Vue基础知识之常用属性和事件修饰符（二）

    Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...

  3. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Vue通信、传值的多种方式，详解

    Vue通信.传值的多种方式,详解 转自:https://blog.csdn.net/qq_35430000/article/details/79291287 一.通过路由带参数进行传值 ①两个组件 A ...

  5. 练习vue(class,style属性)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 【jQuery】总结:筛选器、控制隐藏、操作元素style属性

    筛选器 -> http://blog.csdn.net/lijinwei112/article/details/6938134 常用到的: $("tr[id=ac_"+id+ ...

  7. JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  8. Vue通信、传值的多种方式，详解（都是干货）

    Vue通信.传值的多种方式,详解(都是干货) 可参考博客: https://blog.csdn.net/qq_35430000/article/details/79291287

  9. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

随机推荐

  1. pytroch中cp27m和cp27mu的区别及判别方法

    python中m和mu的区别 从https://download.pytorch.org/whl中下载pytorch安装包时常会发现有相同版本的安装包有cp27m和cp27mu两种,其中cp27m是u ...

  2. 去除mysql里面重复的行并留下id最小的

    DELETE FROM wynews WHERE title IN (SELECT * FROM (SELECT title FROM wynews GROUP BY title HAVING COU ...

  3. React中添加注释

    React中的注释,其实确切来讲是jsx中的注释: {/*单行注释*/} {/* 多 行 注 释 */}

  4. 干货 | 国内互联网公司是如何做微服务实践的？（附PPT下载）

    微服务的概念最早由Martin Fowler与James Lewis于2014年共同提出,并随着Netflix最佳实践的发布而为业界所知.如今,在国内有了大量的微服务实践案例,5月18日,网易云联合云 ...

  5. MQ的深入理解

    MQ的深入理解 MQ的作用: 解耦合,降低系统与系统之间的频繁改动 MQ的特点: 复杂的系统解耦合 (主系统将数据放入mq,子系统需要的时候直接从mq中取出数据)复杂链路的异步调用(将必要的链路执行完 ...

  6. 【Linux】LVM操作添加新硬盘

    目录 1.查看当前硬盘及分区情况 2.初始化/dev/sdb为PV(physical volume) 3.PV加入至VG组. 4.创建lv 5.格式化逻辑分区 6.挂载硬盘/data 7.迁移zabb ...

  7. LINUX CFS 调度tick逻辑，即check_preemt_tick解析

    计算当前task在这个tick周期实际用时delta_exetime, 更新当前task的vruntime; 根据权重,重新计算调度period,计算当前task的应得时间片slice(idle_ru ...

  8. linux学习之Ubuntu

    查看自己的ubuntu版本,输入以下命令(我的都是在root用户下的,在普通用户要使用sudo)第一行的lsb是因为没有安装LSB,安装之后就不会出现这个东西.LSB(Linux Standards ...

  9. oracle里面查询重复数据的方法

    一张person表,有id和name的两个字段,id是唯一的不允许重复,id相同则认为是重复的记录. select id from group by id having count(*) > 1 ...

  10. 【趣学程序】Linux上安装Tengine（Nginx）

    linux 安装tengine tengine是什么 tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳 ...