demo.html

 <!DOCTYPE html>

 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"

       xmlns:v-on="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="UTF-8">

     <title>Vue Demo</title>

     <!--自选版本-->

     <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->

     <!-- 开发环境版本，包含了有帮助的命令行警告 -->

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <!-- 生产环境版本，优化了尺寸和速度 -->

     <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

     <link href="style.css" rel="stylesheet">

 </head>

 <body>

 <div id="app">

     <div>

         <h2>动态绑定CSS样式</h2>

         <div>

             <h4>示例一</h4>

             <div v-on:click="varChangeColor = !varChangeColor" v-bind:class="{changeColor:varChangeColor}">

                 <span>点击切换颜色</span>

             </div>

             <hr>

             <h4>示例二</h4>

             <button v-on:click="varChangeColor = !varChangeColor">改变颜色</button>

             <button v-on:click="varChangeLength = !varChangeLength">改变长度</button>

             <button v-on:click="varChangeLength = !varChangeLength,varChangeColor = !varChangeColor">两者都改变</button>

             <!--computed属性封装对象-->

             <div v-bind:class="computedClass">

                 <span>测试内容</span>

             </div>

         </div>

     </div>

 </div>

 <script src="app.js"></script>

 </body>

 </html>

app.js

 var app = new Vue({

     el: '#app',

     data: {

         varChangeColor: false,

         varChangeLength: false,

     },

     methods: {},

     computed: {

         computedClass: function () {

             return {

                 changeColor: this.varChangeColor,

                 changeLength: this.varChangeLength

             }

         },

     }

 })

style.css

 span {

     background: red;

     display: inline-block;

     padding: 10px;

     color: #fff;

     margin: 10px 0;

 }

 .changeColor span {

     background: green;

 }

 .changeLength span:after {

     content: "length";

     margin-left: 10px;

 }

截图：

Vue之动态绑定CSS样式的更多相关文章

  1. Angular21 动态绑定CSS样式

    1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...

  2. Vue 动态绑定CSS样式

    今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4  使用进度条的话 就没有2.9. ...

  3. Vue.js 控制css样式

    <script src="https://unpkg.com/vue/dist/vue.js"></script> <style type=" ...

  4. Vue 框架-05-动态绑定 css 样式

    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...

  5. vue 项目不显示样式 排版错乱

    vue中的css 样式都在index.html中 看这里是否有导入css

  6. vue环境下安装npm,启动npm 修改js,css样式

    vue环境下修改js,css样式 1.在所在的项目项目的resource 文件夹下面,shift + 鼠标右键--在此处打开命令行窗口: 2.在打开的窗口执行: 安装npm:npm install 启 ...

  7. vue动态绑定类样式ClassName知多少

    对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满 ...

  8. VUE中CSS样式穿透

    VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...

  9. Vue设置全局js/css样式

    ''' 配置全局js mian.js: import settings from '@/assets/js/settings' Vue.prototype.$settings = settings; ...

随机推荐

  1. 从零开始的ESP8266探索（1）-使用Server功能搭建Web Server

    https://blog.csdn.net/Naisu_kun/article/details/80398667 文件系统 https://blog.csdn.net/solar_Lan/articl ...

  2. 初学Python——字典

    一.定义 什么是字典? 字典是一种数据类型,是一系列数据的组合. 每一个数据单元都分为key和value,key也称主键,具有唯一性,不可重复.value可以理解成是key对应的值. info={ 1 ...

  3. 无预挖无ICO-潜力币XDAG最强攻略

    更新下XDAG上交易所了,当时看好这个币才推荐的,那时场外才2毛不到,现在涨到9毛一个了... https://www.coinbat.com/trade/panel/xdag... VBitEX [ ...

  4. 蓝牙BLE设备断线回连分析

    在 文章中分析了Hogp的连接的流程 ,这里分析一下回连的流程. 在使用ble设备的过程中,我们发现当设备和主机配对之后,如果没有解除配对,那么即便设备和主机断开,那么也是可以重新连接而不需要重新走配 ...

  5. 常用的移动前端webapp交互细节

    #常用的移动前端webapp交互细节 ##select的表现方式 ###PC端 select控件在传统PC桌面已经存在多年,由于在IE6等低版本浏览器容易造成层级错乱,一直被一些UI框架所抛弃,而用d ...

  6. COMCMS 微进阶篇，从0开始部署到Centos 7.4

    言:上一篇,我们介绍了,如何本地调试和部署到windows服务器. 本篇,将带大家,从0到1,开始部署到Centos系统上... 经过测试,可以完美支持Centos.这也是.net core 跨平台的 ...

  7. PHP api接口和SQL数据库关联

    数据库表创建 服务器环境配置.连接 .操作.数据库 API接口  原则:

  8. [iOS]改变UIAlertController的标题、内容的字体和颜色

    https://www.jianshu.com/p/51949eec2e9c 2016.03.23 22:36* 字数 272 阅读 37401评论 54喜欢 72 在开发中,弹出框是必不可少的,通常 ...

  9. Python_内置函数之round的幺蛾子

    pycharm运行结果 1 ret = round(0.5) print(ret) >>> 0 ret1 = round(1.5) print(ret1) >>> ...

  10. mysql常用命令行操作(一)：登陆、退出、查看端口、修改密码、刷新

    一.登陆和退出mysql mysql -u root -p # 登陆exit # 退出 二.查看当前mysql的端口号 show global variables like 'port'; 三.查看用 ...