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. React项目编译node内存溢出

    坑爹的node 内存溢出 react开发项目  安装一个插件依赖 ,然后就报错了 报错如下(自己的没有截图出来 这是从别人的截图---报错基本差不多) 之前因为项目大而且旧的原因  使用 过      ...

  2. Linux的用户和组管理

    1.用户和组 一个用户必须有一个主组 一个用户可以同时属于多个组 一个组可以拥有多个用户 用户信息存在: /etc/passwd 组信息存在:/etc/group 密码信息存在: /etc/shado ...

  3. CISP/CISA 每日一题 二

    CISA 观察和测试用户操作程序 1.职责分离:确保没人具有执行多于一个下列处理过程的能力:启动.授权.验证或分发 2.输入授权:可以通过在输入文件上的书面授权或唯一口令的使用来获得证据 3.平衡:验 ...

  4. 【习题 7-4 UVA-818】Cutting Chains

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二进制枚举要解开哪些环. 把所有和它相关的边都删掉. 对于剩下的联通分量. 看看是不是每一个联通分量都是一条链 ->每个点的度 ...

  5. CMake编译Makefile

    以编译Libtif文件为例: 你可以用CMake编译libtiff,超简单,两个步骤. 参考文章 CharlesSimonyi,libtiff库的问题的答复

  6. Zorka和zico实现不同主机之间的交互

    之前参考下面的两篇博文进行了zorka以及其collector端zico的配置. http://quyuxjtu.sinaapp.com/?p=532 http://quyuxjtu.sinaapp. ...

  7. [转载]Google Java Style 中文版

    转自:http://www.blogjava.net/zh-weir/archive/2014/02/08/409608.html Google Java Style 中文版     基于官方文档20 ...

  8. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  9. 汉字转换成对应ASCII

    private static byte[] hanziToHexByte(string hanzistring)        {            byte[] bytes = Encoding ...

  10. linux中获取系统时间 gettimeofday函数

    linux的man页中对gettimeofday函数的说明中,有这样一个说明:   $ man gettimeofday DESCRIPTION     The functions gettimeof ...