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的更多相关文章

  1. [Vue 牛刀小试]：第十七章 - 优化 Vue CLI 3 构建的前端项目模板（1）- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  2. 黑马eesy_15 Vue：04.综合案例（前端Vue实现）

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  3. Vue系列教程（二）之Vue进阶

    一.Vue对象的操作 1. 可以通过一个Vue对象操作另一个Vue对象 var v1 = new Vue({ el: "#app1", data: {title:"hel ...

  4. JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  5. 用vue开发一个app（2，main.js）

    昨天跟着vue的官网搭建了vue的一个脚手架,我也是第一次用VUE一切都在摸索阶段. 今天试着看下里面脚手架里面有点什么东西 先看看main.js 导入了3个模块 一个vue,一个app,还有rout ...

  6. 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  7. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  8. 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  9. [vue]mvc模式和mvvm模式及vue学习思路(废弃)

    好久不写东西了,感觉收生疏了, 学习使用以思路为主, 记录笔记为辅作用. v-if: http://www.cnblogs.com/iiiiiher/p/9025532.html v-show tem ...

随机推荐

  1. PYTHON学习第四天课后总结：

    第三天学习课后总结: 今日重点: 流程控制 1,if 条件判断语句 2,while 循环 3,for 循环 一,if +条件判断语句: 1>   if+条件判断表达式: 子代码1 子代码2 子代 ...

  2. 设计模式六大原则(一)：单一职责原则(Single Responsibility Principle)

    单一职责(SRP)定义: 不要存在多于一个导致类变更的原因,通俗的说,即一个类只负责一项职责. 问题由来: 类T负责两个不同的职责:职责P1,职责P2.当由于职责P1需求发生改变而需要修改类T时,有可 ...

  3. Linux下守护进程精析

    什么是守护进程?     守护进程就是通常所说的Daemon进程,它是Linux中的后台服务程序. 它是一个生存期较长的进程,通常独立于终端而且周期性的运行某种须要的任务以及有时候会等待一些将会发生的 ...

  4. 【MongoDB】The connection between two tables

    In mongoDB, there are two general way to connect with two tables. Manual Connection and use DBRef 1. ...

  5. 关于查看域名A记录，MX记录，CNAME记录-NSLOOKUP用法介绍

    关于查看域名A记录,MX记录,CNAME记录-NSLOOKUP用法介绍 用ping查看域名的IP地址,这样只能查到域名的A记录,要查询域名的MX记录.CNAME记录或NS记录,可用nslookup命令 ...

  6. js日期常用方法

    js获取日期时间格式 export function formatDateTime(timeStamp) { var date = new Date(); date.setTime(timeStamp ...

  7. [selenium]选取下拉框内容的方法

    说明:本文章主要是对select元素操作的讲解,非select元素的下拉框需要另外分析 1.select元素示例: 2.select下拉框选取的3种方法 WebElement selector = d ...

  8. 【CS Round #43 D】Bad Triplet

    [链接]点击打开链接 [题意] 给你n个点m条边的无权无向联通图; 让你找3个点A,B,C 使得A->B=B->C=A->C 这里X->Y表示点X到点Y的最短路长度. [题解] ...

  9. 并发，three

    引言 很久没有跟大家再聊聊并发了,今天LZ闲来无事,跟大家再聊聊并发.由于时间过去的有点久,因此LZ就不按照常理出牌了,只是把自己的理解记录在此,如果各位猿友觉得有所收获,就点个推荐或者留言激励下LZ ...

  10. （转）iptables常用规则：屏蔽IP地址、禁用ping、协议设置、NAT与转发、负载平衡、自定义链

    转自:http://lesca.me/archives/iptables-examples.html 本文介绍25个常用的iptables用法.如果你对iptables还不甚了解,可以参考上一篇ipt ...