第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<!-- 对象就是无序键值对的集合 -->
<!-- <h1 :style="{color:'red','font-weight':200}">这是一个h1</h1> -->
<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>
第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式的更多相关文章
- vue 快速入门 系列 —— vue loader 下
其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...
- vue 快速入门 系列 —— Vue(自身) 项目结构
其他章节请看: vue 快速入门 系列 Vue(自身) 项目结构 前面我们已经陆续研究了 vue 的核心原理:数据侦测.模板和虚拟 DOM,都是偏底层的.本篇将和大家一起来看一下 vue 自身这个项目 ...
- vue 快速入门 系列 —— Vue 实例的初始化过程
其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码, ...
- vue 快速入门 系列 —— vue 的基础应用（上）
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- vue 快速入门 系列 —— vue 的基础应用（下）
其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
- vue 快速入门 系列 —— vue loader 扩展
其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- Vue中通过属性绑定为元素绑定style行内样式
1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象
随机推荐
- 2019CVPR:Classification-Reconstruction Learning for Open-Set Recogition(Abstract)
Abstract Open-set classification is a problem of handling 'unknown' classes that are not contained i ...
- JavaScript基础之常用事件
js 基础之常用事件 在js当中,事件是较为常用的内容,本篇文章来说一些常用的事件. 鼠标事件 下面是常用的鼠标事件: click 当用户按下并释放鼠标按键或其他方式"激活"元素时 ...
- Skywalking部署+NetCore客户端
一.介绍 应用官方的说法:Apache SkyWalking是观察性分析平台和应用性能管理系统.提供分布式追踪.服务网格遥测分析.度量聚合和可视化一体化解决方案 GitHub地址:https://gi ...
- XCTF (app1)
打开app.一个文本框,随便输入提示如下图. 打开JEB反编译. v2调用getPackageInfo获取版本信息.一般 Android 通过 PackageInfo 这个类来获取应用安装包信息,比如 ...
- 3 Java Web 入门 1 Servlet 入门
1 Tomcat 1.1 安装 JDK Oracle 官网 1.2 安装 Tomcat
- pandas 分组统计
# coding:utf-8 import pandas as pd import numpy as np # path = r'C:\Users\wuzaipei\Desktop\桂林三金项目签到情 ...
- 网站性能优化（website performance optimization）2
我们先研究下构建渲染树前的几个步骤:也就是DOM和CSSOM,通常这些步骤的效果最差使你的网页呈现速度非常慢,我们是讨论尽可能快的将HTML流式传输给客户端,使浏览器能够开始构建DOM,还有其他注意事 ...
- String的非空判断：str!=""的为空判断出错问题
if(str!=null && str!= ""){}这是错误的判断 String str1 = ""; String str2 = new S ...
- vs2019编译opencv
序 微软家的宇宙第一ide:visual studio已经更新到了2019版,芒果也更新尝鲜了一遍,体验还不错,建议更新尝尝鲜.芒果顺便使用vs2019编译了一遍opencv,编译过程也非常顺利,以下 ...
- 滚动页面产生动画WOW.js的用法
简介 在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件.WOW.js 依赖 animate.css,所以它支持 an ...