true显示样式，flase不显示

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vue的样式绑定</title>

     <style type="text/css">

     .active{

         background-color: gold;

         color:blue;

     }

     </style>

     <script type="text/javascript" src="./js/vue.js"></script>

     <script type="text/javascript">

     window.onload = function(){

         var app = new Vue({

             el:"#a",

             data:{

                 //激活 false

                 isactive:true

             }

         });

     }

     </script>

 </head>

 <body>

     <div id="a">人生最棒的是不后悔

     <div v-bind:class="{ active:isactive }" style="width: 200px">

     人生最难的是不留遗憾

     </div>

     </div>

 </body>

 </html>

vue样式的动态绑定的更多相关文章

  1. 微信小程序如何像vue一样在动态绑定类名

    微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44   这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别, ...

  2. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  3. 8. vue给标签动态绑定title

    在利用vue开发时,如果标签宽度比较小,我们需要利用overflow:hidden;text-overflow:ellipsis;white-space: nowrap;对其进行隐藏,但隐藏后如何读其 ...

  4. Vue 样式绑定 && 条件渲染

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  5. vue给元素动态绑定样式

    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data () ...

  6. vue样式控制的方式

    创建vue对象: 1.样式控制第一种方式: 直接传递一个数组,注意: 这里的 class 需要使用  v-bind 做数据绑定. 2.样式控制第二种方式: 在数组中使用三元表达式 3.样式控制第三种方 ...

  7. 在 vue.js 中动态绑定 v-model

    在最近的项目中(基于vue),有一个需求就是通过 v-for 动态生成 input.在正常情况下,页面中的input数量是固定的,而且每个input绑定的v-model也是固定的,我们可以在 data ...

  8. vue样式绑定

    vue 绑定class 和style 有相同的地方,可以是数组和对象,对于class class是真实的在css样式中添加的,只不过在元素中添加需要:class这样代表绑定,然后这个class作为对象 ...

  9. 深入理解VUE样式style层次分析

    刚开始使用vue的时候容易被里面的样式搞懵: 样式可以在main.js中引入,在模块js文件中引入,在组件中的style标签引入,在组件中的script标签引入,还可以在index.html的body ...

随机推荐

  1. 清除windows激活信息

    1.管理员运行命令提示符 在命令提示符中输入 slmgr /upk---删除当前KMS密匙 出现"成功地卸载了产品密匙"后,继续依次执行下面两个命令 slmgr /ckms---此 ...

  2. 深度学习之常用linux命令总结

    深度学习中常用linux命令总结 1.创建文件夹 mkdir 文件名2.删除文件 rm -d 目录名 #删除一个空目录 rmdir 目录名 #删除一个空目录 rm -r 目录名 #删除一个非空目录 r ...

  3. python scipy优化器模块（optimize）

    pyhton数据处理与分析之scipy优化器及不同函数求根 1.Scipy的优化器模块optimize可以用来求取不同函数在多个约束条件下的最优化问题,也可以用来求取函数在某一点附近的根和对应的函数值 ...

  4. POJ 1852：Ants

    Ants Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 11754   Accepted: 5167 Description ...

  5. 使用CORDIC算法求解角度正余弦及Verilog实现

    本文是用于记录在了解和学习CORDIC算法期间的收获,以供日后自己及他人参考:并且附上了使用Verilog实现CORDIC算法求解角度的正弦和余弦的代码.简单的testbench测试代码.以及在Mod ...

  6. 基于springboot实现Java阿里短信发送

    1.接口TestController import java.util.Random; import com.aliyuncs.DefaultAcsClient; import com.aliyunc ...

  7. MSVCRTD.LIB和LIBCMTD.LIB冲突（转载）

    以前经常遇到这个警告信息,因为运行并没有什么问题,所以也没深究.但是耿耿于怀那个“ 0 个错误,0 个警告”的成功提示,在网上搜了一下.原来问题出在默认库的引用选择上. VS2008,项目——属性—— ...

  8. spctl命令返回的结果输入到文本中

    说一下我遇到的问题. mac自动打包完之后上传到苹果商店公正,公正后需要检查一下公正的结果, spctl -a -v LBCast.app #查看是否公证成功   显示如下表示公证成功了,有Notar ...

  9. Typecho博客添加版权说明

    版权声明是指作品权利人对自己创作作品的权利的一种口头或书面声明,一般版权声明应该包括权利归属.作品使用准许方式.责任追究等方面的内容.诸如平时看文章时最后会有一个严禁转载的说明,其实这就是版权声明. ...

  10. 《新标准C++程序设计》3.9-3.10（C++学习笔记11）

    一.C++程序到C程序的翻译 程序示例分析: C++: class CCar { public: int price; void SetPrice (int p); }; void CCar::Set ...