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. ubuntu18.04下安装oh-my-zsh

    安装 sudo apt-get install zsh wget --no-check-certificate https://github.com/robbyrussell/oh-my-zsh/ra ...

  2. 《TensorFlow实战Google深度学习框架》笔记——TensorFlow入门

    一.Tensorflow计算模型:计算图 计算图是Tensorflow中最基本的一个概念,Tensorflow中的所有计算都被被转化为计算图上的节点. Tensorflow是一个通过计算图的形式来描述 ...

  3. 13.swoole学习笔记--DNS查询

    <?php //执行DNS查询 swoole_async_dns_lookup("www.baidu.com",function($host,$ip){ echo $ip; ...

  4. python --- 对于需要关联的接口处理方法

    1.unittest对于需要关联的请求,怎么处理(如购物接口,需要先登录) a)把登录请求写到测试用例类的setUP函数中,这样每次调用测试用例,都会先执行setUP函数 b)全局变量的形式声明. c ...

  5. CSS - 实现荧光边框

    1,index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. bzoj 4236JOIOJI

    一开始忘掉特殊情况也是蛋疼2333(有一直到头的.mp[0][0]是要特判的) 做法也就是找mp[i][j]相同的东西.(貌似可以写成线性方程组(z=x+A,z=y+B)过这个的就是相等(可以先从2维 ...

  7. 剑指offer_1.19_Day_3

    替换空格 请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. Javascript_V8 f ...

  8. [NOIP2009普及]分数线划定 T2 排序

    Description 世博会志愿者的选拔工作正在 A 市如火如荼的进行.为了选拔最合适的人才,A 市对所有报名的选手进行了笔试,笔试分数达到面试分数线的选手方可进入面试.面试分数线根据计划录取人数的 ...

  9. 技术沙龙|京东云DevOps自动化运维技术实践

    自动化测试体系不完善.缺少自助式的持续交付平台.系统间耦合度高服务拆分难度大.成熟的DevOps工程师稀缺,缺少敏捷文化--这些都是DevOps 在落地过程中,或多或少会碰到的问题,DevOps发展任 ...

  10. C# 遇到的报错：1、试图加载格式不正确、2、线程间操作无效

    一. 调用第三方控件出现“试图加载格式不正确的程序”原因与解决办法 二. 线程间操作无效: 从不是创建控件"Form1"的线程访问它. 1) C#中Invoke的用法