09.vue中样式-style
<!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: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},
methods: {}
});
</script>
</body>
</html>
09.vue中样式-style的更多相关文章
- wpf 中关于Image中样式Style的一点总结
第一种写法: (1):定义样式 <Style x:Key="imgStyle" TargetType="Image"> : <!-- Tar ...
- vue_music:排行榜rank中top-list.vue中样式的实现:class
排行榜的歌曲列表,根据排名渲染不同的样式,同时需要考虑分辨率的2x 3x图 不同的样式--:class 考虑分辨率的2x 3x图--需要在stylu中的mixin中bgImage根据屏幕分辨率选择图片 ...
- VUE中的style 样式处理的Scope （<style scope>）
在VUE组件中,为了让样式私有化,不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块. 但是这样的话,就会导致无法修改其他第三方组件样式,或者是内嵌的样式,解决方案 ...
- vue 中使用style（样式）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中样式的典型操作(:class,:style)
<template> <div class="home-wrapper"> <div class="home-top">th ...
- 【转】vue中样式被覆盖的问题，vue中的style不生效
转载:http://www.cnblogs.com/shangjun6/p/11416054.html 在我们引入外部的样式时,发现自己无论如何都改不了外部的样式,自己的样式老被覆盖,究其原因还是我们 ...
- vue 中样式的绑定
1.class的对象绑定 //对应的css <style> .active { color: red; } </style> <!--html 对应的代码--> & ...
- 08.vue中样式-class
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手写vue中v-bind:style效果的自定义指令
自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...
随机推荐
- Nginx+Tomcat整合的安装与配置(win.linux)
//原帖 http://zyjustin9.iteye.com/blog/2017394 上面是windows系统,linux直接下拉到分割线. 相信很多人都听过nginx,这个小巧的东西慢慢地在吞食 ...
- office 2016密钥
Office 2016 Pro Plus Retail 版激活密钥:[Key]:3XJTG-YNBMY-TBH9M-CWB2Y-YWRHH[Key]:6TCQ3-NBBJ2-RTJCM-HFRKV-G ...
- python摸爬滚打之day20--多继承,MRO和C3算法
1.新式类和经典类 在python2.2之前, 基类如果不写(), 则表示为经典类; 在python2.2之后, 经典类不复存在, 只存在新式类. 如果基类谁都不继承的话, 则默认继承object. ...
- Android studio中导入SlidingMenu问题
我们导入的library文件夹中的build.gradle 文件里面写的很清楚: android { compileSdkVersion 17 buildToolsVersion &q ...
- kafka笔记3（生产者）
创建Kafka生产者: Kafka生产者有3个必选属性: bootstrap.servers broker地址清单,格式为host:port ,清单中不必包含所有broker,但至少2个 ke ...
- .Net Core创建Docker镜像
1..Net Core项目[Lails.Server.Demo]发布到目录下Lails.Server.Demo\bin\Release\netcoreapp2.1\publish 2.上面目录下新建文 ...
- 富文本之BootStrap-wysiwyg 带图片上传功能
BootStrap-wysiwyg插件具有良好的编辑功能和展示效果. 一.使用方法在网上有很多,在此记录自己使用过程中的一些问题和解决方式. 相关依赖: bootstrap-wysiwyg.js (核 ...
- linux下视频转gif
title: linux下视频转gif date: 2017-11-23 16:55:26 tags: linux categories: linux 安装ffmpeg ffmpeg是一套非常强大的音 ...
- 把ArrayList集合中的字符串内容写到文本文件中
list列表数据导出到指定路径文本文档中 public String getSDCardPath() { String sdCard = Environment.getExternalStorage ...
- 统计随机数及临界值Web Service接口
(2017-02-04 银河统计) 统计函数API概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发 ...