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. pyhton中pandas数据分析模块快速入门（非常容易懂）

    //2019.07.16python中pandas模块应用1.pandas是python进行数据分析的数据分析库,它提供了对于大量数据进行分析的函数库和各种方法,它的官网是http://pandas. ...

  2. Ubuntu下搭建yocto

    参考自: https://www.jianshu.com/p/f6e0debb5e1f https://blog.csdn.net/qq_31041847/article/details/902114 ...

  3. 整合 nginx php-fpm

    start 继上一篇 整合两个images  完成 LNMP github  https://github.com/shiphp/nginx-env     稍加修改 vim   dockerfile ...

  4. web.xml中的classpath是啥

    在web.xml中一个很面熟的字:classpath,它到底是个啥? <servlet> <servlet-name>dispatcherServlet</servlet ...

  5. 六十七、SAP中内表插入的三种方法之一，APPEND的使用

    一.如果内表是一个普通的内表,只用于存储数据不用来排序,那么优先选择APPEND插入 二.我们运行程序,并把工作区和内表加入到断点变量,如图所示,1X22的意思如图 三.我们点击ITAB1,来看内表数 ...

  6. 如何让手游内存占用更小？从内存消耗iOS实时统计开始

    为什么iOS内存使用过多会崩溃,性能会下降?腾讯游戏学院专家Devlin在本文给了解释,如何让手游内存占用更小?从内存消耗iOS实时统计开始. 一.问题 在之前的手游项目中,内存使用过多,都开始崩溃了 ...

  7. v2??? 重启失败

    v2??? 重启失败, 提示 Authorization not available. Check if polkit service is running or see debug message ...

  8. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记：Spring声明式事务管理（基于Annotation注解方式实现）

    在 Spring 中,除了使用基于 XML 的方式可以实现声明式事务管理以外,还可以通过 Annotation 注解的方式实现声明式事务管理. 使用 Annotation 的方式非常简单,只需要在项目 ...

  9. Bean XML 配置（4）- 自动装配

    Spring 系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of ...

  10. Mysql—存储过程

    该处代码可能存在中文的标点符号 存储过程 含义: 一组预先编译好的SQL语句的集合,理解成批处理语句 好处: 1.提高代码的重用性 2.简化操作 3.减少了编译次数并且减少了和数据库连接的次数,提高了 ...