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. 7.5 Varnish VCL的变量和应用片段

  2. 解决oracle 11g 导出空表的方法

    ORACLE 11G中有个新特性,当表无数据时,不分配segment,以节省空间. 解决方法: 1)insert一行,再rollback就产生segment了 该方法是在在空表中插入数据,再删除,则产 ...

  3. WC2020 联训 #19 矩阵

    好不容易自己切一道题 链接 Description 在一个 \(n×(n+1)\) 的棋盘上放棋子, \(n\) 行中每行都恰好有两枚棋子,并且 \(n+1\) 列中每列都至多有两枚棋子,设 \(n= ...

  4. Linux在实际中的应用

    各位童鞋们,你们是如何度过这周周末的呢?这周末的我在家学习学习再学习,然而学习到一半,公司领导突然给我打了个电话过来说有同事等会儿会去客户那部署无人值守安装系统服务,问我去不去学习下.我想我正在学Li ...

  5. R语言 plot()函数 基础用法

    plot(x=x轴数据,y=y轴数据,main="标题",sub="子标题",type="线型",xlab="x轴名称" ...

  6. 【转】JS字符(字母)与ASCII码转换方法

    var strVariable; for(var i=0;i<25;i++) { console.log(String.fromCharCode((65+i))); } strVariable. ...

  7. HDU 4866 多校1 主席树+扫描线

    终于是解决了这个题目了 不过不知道下一次碰到主席树到底做不做的出来,这个东西稍微难一点就不一定能做得出 离散化+扫描线式的建树,所以对于某个坐标二分找到对应的那颗主席树,即搜索出结果即可(因为是扫描线 ...

  8. enlipse 快捷键

    ctrl+shift+o  去掉多余的引用类

  9. msf中arp_sweep使用报错：usbmon1:ERROR while getting interface flags：no such device

    在许多的工具使用中,会出现很多的错误,要养成先思考再去寻找帮助的习惯 在用use命令使用arp_sweep模块的时候爆出错误:usbmon1:ERROR while getting interface ...

  10. JS确认取消按钮使用

    前几天写程序用到了点击提交之后弹出一个信息框确认提交有取消和确定按钮查阅了资料记录一手 if(window.confirm('你确定要提交吗?提交后将无法更改!')){ //这里填写提交代码 retu ...