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. Linux中删除文件，磁盘空间未释放问题追踪

    在客户使用我们产品后,发现一个问题:在删除了文件后.磁盘空间却没有释放.是有进程在打开这个文件,还是其它情况?我们一起来看看一下两个场景 一. 场景一:进程打开此文件 当一个文件正在被一个进程使用时. ...

  2. android adb常见问题的解决方法！

    ** adb的常见问题     adb:android debug bridge,用于连接模拟器/手机与PC端软件(比如:eclipse或者xx手机助手)     adb devices -> ...

  3. 98.TCP通信传输文件

    客户端 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include <stdlib.h> #include <s ...

  4. [Vue + TS] Write a Vue Component as a Class in TypeScript

    Starter app: https://github.com/alexjoverm/Vue-Typescript-Starter Writing Vue components as plain ob ...

  5. Dcloud课程2 什么是Dcloud

    Dcloud课程2  什么是Dcloud 一.总结 一句话总结:DCloud提供了一套快速开发应用的跨平台技术方案. 1.DCloud的产品架构? MUI+(H5+)+HBuilder 2.什么是MU ...

  6. 重新启动IIS不重启电脑

      有时候我们在WEB程序如:ASP,中无意中使用到了一个死循环,或者在测试 DLL组件时,挂了.这时候IIS就停止了响应,我们要继续我们的工作啊,重启IIS服务吧. 然而这个进程还在执行,Inter ...

  7. POJ 3468 A Simple Problem with Integers 线段树区间修改

    http://poj.org/problem?id=3468 题目大意: 给你N个数还有Q组操作(1 ≤ N,Q ≤ 100000) 操作分为两种,Q A B 表示输出[A,B]的和   C A B ...

  8. Python 极简教程（二）编码工具

    Python 的编码工具很多.目前最流行的是 pycharm,关于 pycharm 的安装使用请参考 PyCharm安装使用教程. 而学习过程中,我觉得最好用的,还是 Python 自带的练习工具 I ...

  9. 推荐一款稳定快速免费的前端开源项目 CDN 加速服务

    前面学习到什么是CDN,全称是Content Delivery Network,即内容分发网络.CDN的通俗理解就是网站加速,CPU均衡负载. CDN的基本思路是尽可能避开互联网上有可能影响数据传输速 ...

  10. orabbix 报错No suitable driver found for

     orabbix报错如下:   2018-07-11 14:35:20,119 [main] ERROR Orabbix - Error on Configurator for database qa ...