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. Quartz学习总结（1）——Spring集成Quartz框架

    一.Quartz简介 Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简 ...

  2. Java 学习（16）：集合框架

    Java 集合框架 早在Java 2中之前,Java就提供了特设类.比如:Dictionary, Vector, Stack,  Properties 这些类用来存储和操作对象组. 虽然这些类都非常有 ...

  3. elasticsearch cluster 概述

    在源码概述中我们分析过,elasticsearch源码从功能上可以分为分布式功能和数据功能,接下来这几篇会就分布式功能展开.这里首先会对cluster作简单概述,然后对cluster所涉及的主要功能详 ...

  4. JQuery 当点击input后，单选多选的选中状态

    1.当点击input元素,此元素的选中checked的值 = 此元素此时表现的选中与否的状态. eg:input元素开始是未选中,点击后表现的是选中状态,此元素的checked为true(和此元素开始 ...

  5. CodeVs——T 4919 线段树练习4

    http://codevs.cn/problem/4919/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  6. 洛谷—— P1062 数列

    https://www.luogu.org/problem/show?pid=1062#sub 题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增 ...

  7. 应用Python来计算排列中的逆序数个数

    在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数.一个排列中所有逆序总数叫做这个排列的逆序数.也就是说,对于 ...

  8. 30分钟学会如何使用Shiro（转）

    本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jinnianshilongnian.iteye.com/blog/2018936 我并没有全部看完,只是选择了一部分 ...

  9. springboot入门（三）-- springboot集成mybatis及mybatis generator工具使用

    前言 mybatis是一个半自动化的orm框架,所谓半自动化就是mybaitis只支持数据库查出的数据映射到pojo类上,而实体到数据库的映射需要自己编写sql语句实现,相较于hibernate这种完 ...

  10. 记一次内存泄漏调试(memory leak)-Driver Monkey

    Author:DriverMonkey Mail:bookworepeng@Hotmail.com Phone:13410905075 QQ:196568501 硬件环境:AM335X 软件环境:li ...