<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- 对象就是无序键值对的集合 -->

    <!-- <h1 :style="styleObj1">这是一个h1</h1> -->

    <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        // 注意：属性带-的必须用引号

        styleObj1: { color: '#0ff', 'font-weight': 200 },

        styleObj2: { 'font-style': 'italic' }

      },

      methods: {}

    });

  </script>

</body>

</html>

Vue 设置style属性的更多相关文章

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

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

  2. Vue 设置style样式

    1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...

  3. JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...

  4. CSS style 属性

    CSS style 属性 定义和用法 必需的 type 属性规定样式表的 MIME 类型. type 属性指示 <style> 与 </style> 标签之间的内容. 值 &q ...

  5. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

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

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

  7. js DOM 节点树 设置 style 样式属性

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  9. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Vue. 之 Element获取table中选中的行

    Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...

  2. POJ2082 Terrible Sets

    Terrible Sets Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 5067   Accepted: 2593 Des ...

  3. Codeforces 442B

    题目链接 B. Andrey and Problem time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  4. 删除重复节点 Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  5. spss命令数据整理中compute与record命令的区别

    spss命令数据整理中compute与record命令的区别 record修改存在的变量,或者生成新的变量 spss变量定义说明 1．Name:变量名,定义规则与其它软件中的雷同,如第一个字符必须为字 ...

  6. 2019-8-31-C#-标准性能测试高级用法

    title author date CreateTime categories C# 标准性能测试高级用法 lindexi 2019-08-31 16:55:58 +0800 2018-07-08 0 ...

  7. Leetcode830.Positions of Large Groups较大分组的位置

    在一个由小写字母构成的字符串 S 中,包含由一些连续的相同字符所构成的分组. 例如,在字符串 S = "abbxxxxzyy" 中,就含有 "a", " ...

  8. jQuery第3天

    复习 如何区别 JS DOM对象和 JQ 包装对象? JQ对象其实是经过包装的DOM对象,包装后可调用 JQ 的方法. JS 对象基本上都是属性为主,JQ基本上都方法为主. 可通过 console.d ...

  9. kubernetes1.4新特性：支持Docker新特性

    (一)背景资料 在Kubernetes1.2中这个第三方组件就是go-dockerclient,这是一个GO语言写的docker客户端,支持Dockerremote API,这个项目在https:// ...

  10. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第八章：光照

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第八章:光照 代码工程地址: https://github.com/j ...