[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 ...
随机推荐
- BZOJ3510首都(LCT)
Description 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打败了B国,那么B国将永远从 ...
- Java Servlet学习笔记(四)Servlet客户端Http请求
Servlet 客户端 HTTP 请求 当浏览器请求网页时,它会向 Web 服务器发送特定信息,这些信息不能被直接读取,因为这些信息是作为 HTTP 请求的头的一部分进行传输的.您可以查看 HTTP ...
- ArcEngine的ToolbarControl解析
转自Love Lyre原文 ArcEngine的ToolbarControl解析 ToolbarControlClass有三个主要的接口: IToolbarControl, IToolbarContr ...
- amazeui学习笔记三(你来我往1)--常见问题FAQs
amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...
- v-for一定要与v-bind:key="id"连用
1. v-for: <div v-for="(item,index) in todolist" v-bind:key="item.id"> < ...
- jquery如何实现表单post方式提交
jquery如何实现表单post方式提交 一.总结 一句话总结:即使js给form对象提供了submit()方法,那也不意为表单中可以不写提交按钮这个元素,即form表单依然需要五脏俱全才可以使用js ...
- 【2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛 G】Query on a string
[链接]h在这里写链接 [题意] 让你维护字符串的一段区间内T子串的个数. [题解] 因为t不大,所以. 暴力维护一下a[i]就好. a[i]表示的是S串从i位置开始,能和T串匹配几个字符. 用树状数 ...
- Microsoft iSCSI Software Target 快照管理
Microsoft iSCSI Software Target 支持快照管理,可以对设备进行手工创建快照.快照任务计划.快照回滚等操作. 首先配置iscsi 目标及设备映射关系,并在客户端通过发起程序 ...
- [AngularFire 2 ] Hello World - How To Write your First Query using AngularFire 2 List Observables ?
In this lesson we are going to use AngularFire 2 for the first time. We are going to configure the A ...
- android5.0 BLE 蓝牙4.0+浅析demo搜索(一)
作者:Bgwan链接:https://zhuanlan.zhihu.com/p/23341414来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:Bgwan 莳萝花 ...