<div id="app31">
<!--多个属性 ,号隔开-->
<!-- v-bind:style="{fontSize: fontSize + 'px'}" 绑定内联样式-->
<!--v-bind:class="{Class1:isActive}" class1+bool class需要我们自己定义 绑定一个class-->

<div v-bind:id="id" v-bind:title="title" v-bind:style="{fontSize: fontSize + 'px'}" v-bind:class="{Class1:isActive}"
v-on:click="GetInfo(id+title)">{{ info }}</div> // 传参
</div>

  实现:

new Vue({
el: "#app31",
data() {
return { info: '111',
id: 121321,
title: '222',
isActive: true, // 是否生效
fontSize:40
}
},
//data: { //},
methods: {
GetInfo: function (e) {
alert(e);
} }
});

  

vue 绑定 class 和 内联样式(style)的更多相关文章

  1. v-bind指令动态绑定class和内联样式style

    动态绑定class—概述 数据绑定(v-bind指令)一个常见需求是操作元素的 class 列表.因为class是元素的一个属性,我们可以用 v-bind 处理它们 我们只需要计算出表达式最终的字符串 ...

  2. vue 内联样式style中的background

    在我们使用vue开发的时候   有很多时候我们需要用到背景图 这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去 注意  在vue中直接使用style时 花括号一定别忘记 还有就是你的url一定 ...

  3. vue 内联样式style三元表达式(动态绑定样式)

    <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >动态绑定样式</sp ...

  4. vue学习(九) 使用内联样式设置style样式

    /html <div id="app"> //对象就是无序键值对的集合 <h1 :style="{ color:red, 'font-weight':2 ...

  5. vue.js中内联样式style三元表达式

    <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...

  6. vue里如何灵活的绑定class以及内联style

    在我们平常的前端开发中少不了对DOM的操作,以及样式的动态控制,那我们在使用vue的时候该如何灵活的绑定class呢 1.最简单一个class绑定 v-bind:class设置一个对象,可以动态地切换 ...

  7. Vue.js style(内联样式)

    Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...

  8. Vue 内联样式的数据绑定

    Vue 内联样式的数据绑定 之前学的是数据绑定 class,现在可以将数据绑定到 style 中. <div id="app"> <div v-bind:styl ...

  9. Vue学习之路第十二篇:为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

随机推荐

  1. 【leetcode】982. Triples with Bitwise AND Equal To Zero

    题目如下: Given an array of integers A, find the number of triples of indices (i, j, k) such that: 0 < ...

  2. Linq 使用Startswith 出现空引用的问题

    一.问题 我使用的是Entity Fromwork CodeFirst来操作数据库,昨天在使用startswith查询数据的时候发现一个问题,就是经常一直报空引用的错误,查了很久才找到原因,这里做一个 ...

  3. 网站运行一段时间后就无法访问,重启Tomcat才能恢复

    网站运行一段时间后就无法访问,重启Tomcat才能恢复出现这种情况,很可能是以下几种情况:1.超过数据库连接池上限2.并发数达到上限3.内存溢出具体还是需要通过打印的日志进行具体分析.解决方法1.如果 ...

  4. gokit 统计分析 M2M接入服务 OTA固件升级 硬件社交化

    统计分析 M2M接入服务  OTA固件升级 硬件社交化 统计分析 为智能硬件定制的统计分析服务.只需添加入一行代码的集成工作,多维度的设备使用和用户行为数据就能自动统计出来. 演示 特色一:设备上线情 ...

  5. error LNK2001: 无法解析的外部符号 __imp__Shell_NotifyIconA@8

    编译链接报错 error LNK2001: 无法解析的外部符号 __imp__Shell_NotifyIconA@8 解决方案: 在代码中添加链接库Shell32.lib #pragma commen ...

  6. hibernate.Criteria分页排序模糊查询

    org.hibernate.Criteria criteria = simpleDAO.getSession().createCriteria(Event.class); Criterion c = ...

  7. Java中创建泛型数组

    Java中创建泛型数组 使用泛型时,我想很多人肯定尝试过如下的代码,去创建一个泛型数组 T[] array = new T[]; 当我们写出这样的代码时编译器会报Cannot create a gen ...

  8. python学习笔记:循环语句——while、for

    python中有两种循环,while和for,两种循环的区别是,while循环之前,先判断一次,如果满足条件的话,再循环,for循环的时候必须有一个可迭代的对象,才能循环,比如说得有一个数组.循环里面 ...

  9. SQL才是世界上最牛逼的语言!

    身处互联网行业,SQL 可能是你需要掌握的核心技能之一. 最早的时候,SQL 作为一门查询数据库的语言,是程序员的必备技能,运维.开发.Web 以及数据等从业人员都需要用到 SQL,毕竟只有查询到正确 ...

  10. python_模块 collections,random

    collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict. ...