一共用到了两种方式:

第一种:对象

第二种:数组

看代码:

<!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. Apollo服务端设计原理剖析

    本文摘自于<Spring Cloud微服务 入门 实战与进阶>一书. 1 配置发布后的实时推送设计 配置中心最重要的一个特性就是实时推送了,正因为有这个特性,我们可以依赖配置中心做很多事情 ...

  2. SpringMVC拦截器和数据校验

    1.什么是拦截器 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求 ...

  3. CPU参数指标说明

    %user %user表示CPU一共花了多少比例的时间运行在用户态空间或者说是用户进程(running user space processes) 典型的用户态空间程序有:Shells.数据库.web ...

  4. JVM GC系列 — GC收集器

    一.前言 前文学习了各种GC回收算法,掌握了GC回收的原理,但是真正的GC实现却尤为复杂,本篇文章将主要介绍各种GC收集器. 目前主流的HotSpot VM支持多种虚拟机,这些虚拟机也体现了GC的发展 ...

  5. -ffast-math编译选项作用

    https://stackoverflow.com/questions/7420665/what-does-gccs-ffast-math-actually-do

  6. MySQL 中的索引

    索引用来加速查询.正常来说,当查询数据时,MySQL 需要从表的第一条记录开始,读取整个表的内容,进行查询. 但如果有索引,MySQL 可根据索引快速定位需要查询条目的具体位置,加快了查询速度. 原理 ...

  7. The method newInstance() from the type Class is deprecated since version 9

    newInstance()在 java9中已被弃用 JAVA9之前用法 Class.forName("类的全限定名").newInstance(); JAVA9之后用法 Class ...

  8. npm命令集合

    1.npm初始化项目:npm init 或者 npm init --yes 生产 package.json文件 2.下载package.json安装包: npm install 缩写 npm i

  9. vue学习笔记（三）： 启动说明

    1.启动页面:index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  10. 关于 SONY WF1000XM3 在 Windows 10 下蓝牙连接只有 Handfree 没有 Stereo 模式

    应该是驱动适配问题,目前粗暴的解决方案貌似下载安装一个 Intel APTX 驱动就可以了: https://www.dell.com/support/home/cn/zh/cndhs1/driver ...