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. pycharm 安装及使用

    pycharm 的使用: IDE 集成开发环境(Integrated Development Environment) VIM 经典的Linux下的文本编辑器 EMACS: Linux文本编辑器,比v ...

  2. DataGuard切换(主库为Rac+备库为Rac)

    http://blog.itpub.net/29477587/viewspace-1331121/ 前段时间做了一次主备库的切换,大体写下操作步骤和记录,分享下. 环境:           db v ...

  3. 数组复制的五种方式（遍历循环一一赋值、System.arraycopy、地址赋值、克隆clone()、Arrays.copyof()）

    package com.Summer_0424.cn; import java.util.Arrays; import java.util.concurrent.CopyOnWriteArrayLis ...

  4. [Micropython]TPYBoard v202 利用单片机快速实现家庭智能控制平台

    一提到智能家庭,大家可能首先想到的是各种大佬级公司搞的牛逼产品,或者说是创新产品.想想就觉得很复杂,有的用工控机,有的用树莓派,还有的用arduino,不管用什么,都绕不过服务器进行控制,比如yeel ...

  5. TIME_WAIT过多的解决方法(转)

    1.参考:https://blog.csdn.net/liangzhao_jay/article/details/50546898 2.参考: [Unix 网络编程]TCP状态转换图详解 - wenq ...

  6. Python学习总结 10 自动化测试Selenium2

    一, 配置 Selenium2 1 Selenium是什么? Selenium是一个用于Web应用程序测试的工具.Selenium 测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括I ...

  7. java redis 分页查询数据

    package com.liying.tiger.test; import java.util.List; import org.springframework.context.Application ...

  8. 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  9. nodejs源码编译-mipse64el架构

    下载nodejs,node-v6.1.0.tar.gz 链接: https://pan.baidu.com/s/1eCtNBWD5yaKiQIHp3pRKew 提取码: faun 注意对应版本的gcc ...

  10. ofo C++面试

    面试官不是C++方向,所以上来就是三个算法题. 1. 假设一个男生和他女朋友约吃饭,男生到的时间点是 6 点 到6点半,女生到的时间可能是 6点15到6点30,都是等概率的到达,问男生比女生到的晚的概 ...