[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 ...
随机推荐
- 读书笔记-Java设计模式
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! Java的封装性很好,拿访问控制符来讲,没有权限的类或方法是不能访问的.如public,都可访问:p ...
- 【Energy Forecasting】能源预測的发展和展望
说明 本文的内容来自Tao Hong博士的Energy Forecasting: Past, Present and Future一文的翻译和整理. 引入 能源预測包括了电力行业中有关预測的广泛的内容 ...
- 在手机中预置联系人/Service Number
代码分为两部分: Part One 将预置的联系人插入到数据库中: Part Two 保证预置联系人仅仅读,无法被编辑删除(在三个地方屏蔽对预置联系人进行编辑处理:联系人详情界面.联系人多选界面.新建 ...
- 用PHP 去掉所有html标签里的部分属性
用PHP 去掉所有html标签里的部分属性 http://zhidao.baidu.com/question/418471924.html 用PHP 去掉所有html标签里的部分属性 tppabs & ...
- JS contcat() 连接数组 函数
语法: arrayObject.concat(arrayX,arrayX,......,arrayX) 1.把元素添加到数组中 arr.concat(a,b,c);2.把数组连起来 arr.conca ...
- 16、cgminer学习之：pthread_mutex_init和pthread_cond_init
1.原理 假设有两个线程同时访问一个全局变量 n,这个全局变量的初始值等于0. Int n = 0 ; 消费者线程 A 进入临界区,访问 n,A 必须等到 n 大于 0 才能接着往下执行,如果 n= ...
- Appium_Java_API
1. driver.findElement(MobileBy.AndroidUIAutomator("邀请")).click();2. driver.findElementById ...
- amazeui学习笔记--css（常用组件14）--缩略图Thumbnail
amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...
- 使用VHD，让Win XP和 Win2003 运行在内存中
通过一定的手段可以让XP和2003甚至Win7运行在内存中.我很感兴趣,于是按照网上的资料在VBox虚拟机中测试了一次,运行成功.这几天将其折腾到实体机上. 声明:我的做法和网上的做法有些不一样,我的 ...
- 【Codeforces Round #301 (Div. 2) A】 Combination Lock
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟水题 [代码] #include <bits/stdc++.h> using namespace std; cons ...