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. 009_python魔法函数

    11. (译)Python魔法方法指南 原文: http://www.rafekettler.com/magicmethods.html 原作者: Rafe Kettler 翻译: hit9 原版(英 ...

  2. WiFi-ESP8266入门http（3-3）网页认证上网-post请求-ESP8266程序

    第一版 原型系统 连上西电的网 直接发送上网的认证信息 返回认证结果网页 成功上网 #include <ESP8266WiFi.h> #define Use_Serial Serial s ...

  3. tomcat 启动慢问题

    主要原因: 生成随机数的时候卡住了,导致tomcat启动不了. 是否有足够的熵来用于产生随机数,可以通过如下命令来查看 [root@oldboy tools]# cat /proc/sys/kerne ...

  4. Ubuntu使用小技巧

    1. Ubuntu下自由截图 Ubuntu下使用PrintScreen按键可以截取整个屏幕,但是很多时候并不需要那么多内容,还需要对图片进行编辑. 这时候就需要截图时,有矩形选择,更符合要求. 进入S ...

  5. TMS-规划图

    规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 ...

  6. Hibernate缓存策略(一级缓存和EHcache二级缓存)

    如何配置二级缓存: 第一步:导入EHcache依赖 1)Maven项目: <!--此处使用hibernate4--> <dependency> <groupId>o ...

  7. 性能调优9：根据WaitType诊断性能

    SQL Server数据库接收到查询请求,从生成计划到执行计划的过程,等待次数和等待时间在一定程度上揭示了系统性能的压力,如果资源严重不足,就会成为性能的瓶颈.因此,对等待的监控非常有助于对系统性能进 ...

  8. 分享一个公众号h5裂变吸粉源码工具

    这次我是分享我本人制作的一个恶搞程序,说白了就是一个公众号裂变吸粉工具,市面上有很多引流方法,例如最常见的就是色流,哈哈,今天我跟大家分享的方法是有趣的,好玩的,恶搞的.这个程序上线一天已经收获了61 ...

  9. Django 的路由层 视图层 模板层

    --------------------------------------------------------------通过苦难,走向欢乐.——贝多芬 Django-2的路由层(URLconf) ...

  10. 二、截取字符串长度（css方式）

    只针对谷歌 width: 100%; //height: 58px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -w ...