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. 14.swing

    一.开发架构1.最外层是一个jframe的框架2.可以在框架中添加任意组件3.组件分为两大类: a.容器类型:可以继续在该容器中添加其他组件.例如:jpanel 面板,可以多个面板添加到同一个框架中 ...

  2. ROS 小乌龟测试

    教程 1.维基 http://wiki.ros.org/cn/ROS/Tutorials 2. 创客智造 http://www.ncnynl.com/category/ros-junior-tutor ...

  3. flask-sqlalchemy中Datetime的创建时间、修改时间,default，server_default，onupdate

    记录第一次创建时间,default falsk中如下两个字段 create_time1 = db.Column(db.DateTime, default=datetime.now) create_ti ...

  4. HTTP协议详细分析

    1.HTTP概述 1.1.什么是HTTP? 它是Hyper Text Transfer Protocol的缩写.超文本传输协议. 它是客户浏览器和web服务器之间的一种一问一答的规则.问答机制/握手机 ...

  5. 搭建SpringBoot+dubbo+zookeeper+maven框架（四）

    今天我们完成框架的thymeleaf模板显示页面功能,页面的用户登陆,密码的AES加密解密,输错3次进行验证码验证功能,东西可能比较多,这个是我这两天在网上结合各种资源整合出来的,基本功能都已经实现, ...

  6. ASP.NET Core MVC四种枚举绑定方式

    前言 本节我们来讲讲在ASP.NET Core MVC又为我们提供了哪些方便,之前我们探讨过在ASP.NET MVC中下拉框绑定方式,这节我们来再来重点看看枚举绑定的方式,充分实现你所能想到的场景,满 ...

  7. 【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax

    Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 Github → https://github.com/dntzhang/cax 点我看看 DEMO 小程序 DEMO 正在审核中敬请 ...

  8. vue 二三倍图适配，1像素边框

    //文件名为mixin.scss// 2,3倍图适配 @mixin bg-image($url){ background-image: url("~imgs/icon/" + $u ...

  9. 华为MAC Flapping ， MAC的漂移

    华为写的很详细,MAC 地址的漂移会导致流量的中断. 华为阻止MAC地址漂移的方法有三种: 一.端口配置静态MAC地址 在全局视图下,执行命令mac-address static mac-addres ...

  10. UnderWater+SDN论文之六

    Protocol Emulation Platform Based on Microservice Architecture for Underwater Acoustic Networks Sour ...