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. 4-cookie 简介

    1.eclipse中tomcate镜像位置:D:\javaTools\eclipse\workspace\.metadata\.plugins\org.eclipse.wst.server.core\ ...

  2. 五.JQuary 实例

    需要引入jquery.js文件 script type="text/javascript" src="../js/jquery-3.2.1.js">< ...

  3. 20175330 实验二《Java面向对象程序设计》实验报告

    一.前期准备:unit的安装与使用:打开idea,Preferences中点击Plugins,在market中搜索junit,如图点选JUnitGenerator V2.0进行安装,安装后会显示ins ...

  4. mysql 实现树形的遍历

    前言:关于多级别菜单栏或者权限系统中部门上下级的树形遍历,oracle中有connect by来实现,mysql没有这样的便捷途径,所以MySQL遍历数据表是我们经常会遇到的头痛问题,下面通过存储过程 ...

  5. Feature Extractor[batch normalization]

    1 - 背景 摘要:因为随着前面层的参数的改变会导致后面层得到的输入数据的分布也会不断地改变,从而训练dnn变得麻烦.那么通过降低学习率和小心地参数初始化又会减慢训练过程,而且会使得具有饱和非线性模型 ...

  6. oracle expdp导出时报 ora-39070:无法打开日志文件

    在通过expdp导出命令导出某个用户的对象时出现以下截图错误: ORA-39002:操作无效 ORA-39070:无法打开日志文件 ORA-39087:目录名<directory>无效 该 ...

  7. 完成了Coursera的一个机器学习课程

    终于完成了这个课程,从开始学习,到现在差不多过了一年的时间,中间由于一些原因耽搁了,最终还是完成了,记录一下!

  8. BZOJ3199 SDOI2013 逃考 半平面交、最短路

    传送门 如果我们对于每一个点能找到与其相邻的点(即不经过其他点监视范围能够直接到达其监视范围的点)和是否直接到达边界,就可以直接BFS求最短路求出答案. 所以当前最重要的问题是如何找到对于每一个点相邻 ...

  9. FAT32文件系统学习(3) —— 数据区(DATA区)

    FAT32文件系统学习(3) —— 数据区(DATA区) 今天继续学习FAT32文件系统的数据区部分(Data区).其实这一篇应该是最有意思的,我们可以通过在U盘内放入一些文件,然后在程序中读取出来: ...

  10. Maven学习第3期---m2eclipse使用

    一.m2eclipse简介 和Nexus一样,m2eclipse也是Sonatype出品的一款开源工具,它基于Eclipse Public License-v.10开源许可证发布,用户可以免费下载并使 ...