[Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
Use v-bind:class and v-bind:style to compute html classes and inline styles from component data. Vue.js will automatically add vendor prefixes when using v-bind:style.
<body>
<div id="card">
<header>{{ title }}</header>
<button v-bind:class="{'rounded': isRounded, 'large': sizeToggle}"
v-bind:style="styles" v-bind:disabled="disabled" >Start Tour</button>
<hr>
<h4>Options</h4>
<ul>
<li><input type="checkbox" v-model="sizeToggle"><label>Large</label></li>
<li><input type="checkbox" id="round" v-model="isRounded"><label for="round">Rounded</label></li>
<li><input type="checkbox" v-model="disabled"><label>Disabled</label></li>
<li><input type="text" v-model="backgroundColor"/><label>Background Color</label></li>
<li><input type="text" v-model="fontColor"/><label>Font Color</label></li>
<li><input type="range" v-model="range" min="15" max="85"><label>Position</label></li>
</ul>
</div>
<script src="script.js"></script>
</body> </html>
var card = new Vue({
el: "#card",
data: {
title: "Style Bindings",
isRounded: false,
sizeToggle: false,
disabled: false,
backgroundColor: '#CCCCCC',
fontColor: "#000000",
range: 50
},
computed: {
styles: function(){
return {
color: this.fontColor,
background: this.backgroundColor,
'margin-left': this.range+"%"
}
}
}
});
body {
padding: 2em;
font-family: sans-serif;
}
#card {
border: 2px solid Gray;
border-radius: 10px;
}
.rounded {
border-radius: 10px;
}
.large {
font-size: 2em;
}
label {
margin-left: 1em;
}
button:disabled {
opacity: .5;
cursor: not-allowed;
}
#card header {
display: block;
border-radius: 8px 8px 0 0;
background: orange;
padding: 10px;
color: white;
font-size: 1.5em;
margin-bottom: 1em;
}
#card div, #card p {
padding:1em;
}
#card ul {
list-style: none;
margin:;
padding: 0 1em 1em;
}
#card ul li {
padding: .25em;
border: 1px solid gray;
margin: .5em 0;
border-radius: 3px;
}
[Vue] Update Attributes, Classes and Styles in Vue.js with v-bind的更多相关文章
- [Vue 牛刀小试]：第十七章 - 优化 Vue CLI 3 构建的前端项目模板（1）- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- 黑马eesy_15 Vue：04.综合案例（前端Vue实现）
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...
- Vue系列教程（二）之Vue进阶
一.Vue对象的操作 1. 可以通过一个Vue对象操作另一个Vue对象 var v1 = new Vue({ el: "#app1", data: {title:"hel ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 用vue开发一个app（2，main.js）
昨天跟着vue的官网搭建了vue的一个脚手架,我也是第一次用VUE一切都在摸索阶段. 今天试着看下里面脚手架里面有点什么东西 先看看main.js 导入了3个模块 一个vue,一个app,还有rout ...
- 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- [vue]mvc模式和mvvm模式及vue学习思路(废弃)
好久不写东西了,感觉收生疏了, 学习使用以思路为主, 记录笔记为辅作用. v-if: http://www.cnblogs.com/iiiiiher/p/9025532.html v-show tem ...
随机推荐
- BZOJ2733: [HNOI2012]永无乡（线段树合并）
Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...
- 洛谷 P1287 盒子与球
P1287 盒子与球 题目描述 现有r个互不相同的盒子和n个互不相同的球,要将这n个球放入r个盒子中,且不允许有空盒子.问有多少种方法? 例如:有2个不同的盒子(分别编为1号和2号)和3个不同的球(分 ...
- 怎样 TabHostFragment自己定义 tab键(indicator)
1 获得 tabHostFragment: ActionBarActivity activity2 = (ActionBarActivity) activity; mTabHost = new Fra ...
- 在安卓(手机)上运行 Ubuntu (Linux)
在安卓(手机)上运行 Ubuntu (Linux) 由于x86 和 arm 是跨平台的,所使用的编译器自然也不同.如果要在电脑上编译安卓手机上的程序,则需在电脑端建立ARM交叉编译环境,这个过程是在耗 ...
- Apache/Tomcat/JBOSS/Nginx区别（转）
先说Apache和Tomcat的区别: Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. ...
- 洛谷 P2095 营养膳食
洛谷 P2095 营养膳食 题目描述 Mr.L正在完成自己的增肥计划. 为了增肥,Mr.L希望吃到更多的脂肪.然而也不能只吃高脂肪食品,那样的话就会导致缺少其他营养.Mr.L通过研究发现:真正的营养膳 ...
- apache+nginx 实现动静分离
apache+nginx 实现动静分离 http://blog.csdn.net/xysoul/article/details/50347971
- iOS开发RunLoop学习：一：RunLoop简单介绍
一:RunLoop的简单介绍 #import "ViewController.h" @interface ViewController () @end @implementatio ...
- POJ 2284 That Nice Euler Circuit (LA 3263 HDU 1665)
http://poj.org/problem?id=2284 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&a ...
- sql for xml query sample
sample 1: declare @x xml select @x='<ArrayOfScheduledTime> <ScheduledTime> <Recurrenc ...