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. 【2017中国大学生程序设计竞赛 - 网络选拔赛】A Secret

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6153 [题意] ,S2中出现的次数与其长度的乘积之和.  [题解] 扩展KMP的模板题. 首先,把S2和 ...

  2. Spring.net的Demo项目，了解什么是控制反转

    Spring这个思想,已经推出很多年了. 刚开始的时候,首先是在Java里面提出,后来也推出了.net的版本. Spring里面最主要的就是控制反转(IOC)和依赖注入(DI)这两个概念. 网上很多教 ...

  3. amazeui学习笔记一（开始使用4）--Web App 相关

    amazeui学习笔记一(开始使用4)--Web App 相关 一.总结 1.桌面图标(Touch icon)解决方案:终极方案:link标签的rel和href属性: <link rel=&qu ...

  4. 7.zookeeper集群搭建（windows环境下）

    转自:https://www.cnblogs.com/xuxiuxiu/p/5868481.html 本次zk测试部署版本为3.4.6版本,下载地址http://mirrors.cnnic.cn/ap ...

  5. 12.模板别名以及auto定义返回值

    #include <iostream> #include <array> using namespace std; //定义返回值类型 template<class T1 ...

  6. 【Codeforces Round #431 (Div. 2) B】 Tell Your World

    [链接]点击打开链接 [题意] n个点,x从左到右严格递增的顺序给出 让你划两条平行的,且没有相同点的直线; 使得它们俩各自最少穿过一个点. 且它们俩穿过了所有的点. [题解] 枚举第一个点和哪个点组 ...

  7. 洛谷—— P1118 [USACO06FEB]数字三角形Backward Digit Su…

    https://www.luogu.org/problem/show?pid=1118#sub 题目描述 FJ and his cows enjoy playing a mental game. Th ...

  8. ajax获取服务器响应信息

    window.onload = function(){ document.getElementById('btn').onclick = function(){ var req = new XMLHt ...

  9. 阿里云部署Docker(3)----指令学习

    通过上两节的学习http://blog.csdn.net/minimicall/article/details/40119177 和http://blog.csdn.net/minimicall/ar ...

  10. 逻辑与和逻辑或：&& 、||

    逻辑或:首先看左边是真还是假(除了那5个都是真),如果为真,返回左边值,如果为假,返回右边的值 逻辑与:和逻辑或相同,先看左边的值是真是假,如果左边为真返回右边的值,左边为假返回左边的值 在两者同时出 ...