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. 2 JVM 运行机制

  2. Microsoft Windows 实用程序 Sysinternals Utilities Index

    最新页面时间:2017年5月16日 Sysinternals被MS收购--windows internals共近70多个工具集 Sysinternals套件 整套Sysinternals Utilit ...

  3. leetcode（数据结构）—— 镜像二叉树

    镜像二叉树,力扣上面的的题目,这道题很简单,放出来的原因是它要求用两种解法来写这道题——递归和迭代,而且数据结构学到了树,记录自己学习的过程,以免忘了,没地方找. 题目的意图很明显,就是然你写个程序看 ...

  4. 官网英文版学习——RabbitMQ学习笔记（五）Publish/Subscribe

    发布/订阅模式:把一个消息发送给多个消费者. 前几篇文章的思想是,我们好像看到了生产者将消息直接发送给queue,然后消费者也从queue中进行消费.其实并非如此,RabbitMQ中的消息传递模型的核 ...

  5. JS - input输入框点击回车提交或者进行别的操作

    $("input").keydown(function(event){ if (event.keyCode == 13) {         /* 提交或者别的操作 */ } }) ...

  6. R 读取excel的方法

    1.加载 readxl 包,利用 reade_excel() 函数 install.packages("readxl") library(readxl) data = read_e ...

  7. @echo off命令

    在C盘下新建一个文本文档,将名字改为1.bat.  打开/编辑,输入call cmd.cmd是命令提示符.运行该文件,出现命令提示符窗口,在该窗口下可以运行各种命令.由图1.1可见,在第一行显示C:\ ...

  8. tf.argmax()函数作用

    tf.argmax()函数原型: def argmax(input, axis=None, name=None, dimension=None, output_type=dtypes.int64) 作 ...

  9. 119-PHP调用private成员的方法

    <?php class ren{ //定义人类 private $birthday='1990-12-20'; //定义private修饰的成员属性 public function say_bi ...

  10. RabbitMQ系列文章

    详解 RabbitMQ 管理界面解析框架 (一) RabbitMQ系列(二)深入了解RabbitMQ工作原理及简单使用 RabbitMQ windows安装步骤 RabbitMQ管理页面各种属性详解 ...