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. login SMTP send mail error : Unable to read data from the transport connection: net_io_connectionclosed

    client.Credentials = new NetworkCredential(sSMTPuser, sSMTPpass); client.Credentials = new NetworkCr ...

  2. c#实现"扫描检测硬件改动"

    public static class Win32Api { public const int CM_LOCATE_DEVNODE_NORMAL = 0x00000000; public const ...

  3. Web安全测试学习笔记 - vulhub环境搭建

    Vulhub和DVWA一样,也是开源漏洞靶场,地址:https://github.com/vulhub/vulhub 环境搭建过程如下: 1. 下载和安装Ubuntu 16.04镜像,镜像地址:htt ...

  4. 开源DDD设计模式框架YMNNetCoreFrameWork第二篇-增加swagger，数据库迁移，增加权限模型

    1.框架去掉application层,把HOst作为application层 2.增加swagger插件 3.增加Asp.net  Identity身份验证 源代码地址:https://github. ...

  5. 九十九、SAP中ALV事件之十二，给ALV的标题栏添加图片

    一.在OAER中找一个喜欢的图片,对象标识为“TRVPICTURE04” 二.来到我们的代码区,输入代码 三.效果如下 很完美

  6. 浅谈Python之sys.argv

    (1)sys.argv是什么 sys模块为进入解释器维护或使用的变量,以及与解释器相关的函数提供了途径.sys.argv在脚本程序中扮演了这样一个角色:将命令行输入的参数作为一个list传入脚本程序, ...

  7. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记：Spring事务管理接口PlatformTransactionManager、TransactionDefinition和TransactionStatus

    Spring 的事务管理是基于 AOP 实现的,而 AOP 是以方法为单位的.Spring 的事务属性分别为传播行为.隔离级别.只读和超时属性,这些属性提供了事务应用的方法和描述策略. 在 Java ...

  8. java反射的认知和学习

    1.学习了Class对象,Filed对象(对应数据),Method对像(对应函数),Constructor对象(对应构造函数). 2.Declared可用于获取私有的数据和方法,但是打印得使用setA ...

  9. Stuts2与SpringMVC

    Struts2:一个基于MVC设计模式的Web应用框架,本质上相当于一个servlet.以WebWork为核心,采用拦截器的机制处理用户的请求(Filter). 轻量级的MVC框架.低侵入性,与业务代 ...

  10. SpringBoot基于easyexcel导出和写入Excel

      easyexcel是阿里巴巴旗下开源项目,主要用于Excel文件的导入和导出处理,今天我们利用SpringBoot和easyexcel实战演示如何导出和写入Excel文件. 一.加入我们需要的ea ...