[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 ...
随机推荐
- 【习题 7-10 Uva11214】Guarding the Chessboard
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 迭代加深搜索. 可以想见最后深度不会很深吧.. 然后皇后之间互相攻击到是允许的.. 就这样 [代码] /* 1.Shoud it u ...
- Android滚轮选择器实现
思路: 1.布局,整个控件的布局,事实上就是用代码取带xml来实现当前布局 2,能够滑动的(即滚轮).事实上是一个ScrollView 3.推断滑动状态的,有protected void onScro ...
- 在C#中实现Word页眉页脚的全部功能
页眉页脚经常使用于文章排版,在Word工具栏里.我们能够加入页眉,页脚,页码,日期和时间.图片等信息和内容.页眉/页脚有两个额外选项:首页不同,奇偶页不同.有时在不同的节(section)里插入不同的 ...
- Flume Channel Selectors官网剖析(博主推荐）
不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) 一切来源于flume官网 http://flume.apache.org/Flu ...
- Sql Server服务 远程过程调用失败
问题: 今天SQL数据库登录不上了,然后想启动Sql实例,却发现如下问题(配置环境:win7旗舰版x64,SqlServer2008R2,同时安装VS2012): 以前出现过这个问题,那时候是因为把实 ...
- select下拉列表选中后，跳转新链接
1.在当前页面打开新链接 <select onchange="location.href=this.options[this.selectedIndex].value" na ...
- POJ 2376 Cleaning Shifts 区间覆盖问题
http://poj.org/problem?id=2376 题目大意: 给你一些区间的起点和终点,让你用最小的区间覆盖一个大的区间. 思路: 贪心,按区间的起点找满足条件的并且终点尽量大的. 一开始 ...
- StackExchange.Redis 官方文档(五) Keys, Values and Channels
原文:StackExchange.Redis 官方文档(五) Keys, Values and Channels Keys, Values and Channels 在使用redis的过程中,要注意到 ...
- orabbix自定义监控oracle
前提:安装orabbix 好后能正常运行, 检验条件(1). 最新数据有数据 (2).图形有显示 (3).日志不报错 /opt/orabbix/logs/orabbix.log 添加方法: 1. ...
- PHP回调函数--call_user_func_array
我这是抄的 感谢 https://www.cnblogs.com/zzl-21086595/p/4547519.html 全局函数的回调 这里的全局函数的意思,是直接使用function定义的函数,它 ...