<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. pycharm查找替换快捷键

    查找:CTRL + F 替换:CTRL + R 如果想删除,替换那一栏不填就可以了

  2. java基础学习笔记一

    一.JAVA访问控制修饰符 用于控制类中成员的可见性 1.public(公有):在任何地方可以访问 2.protected(受保护的):子夫类(即使字父类不在同一包)和本包中可以访问 3.defaul ...

  3. PHP curl_multi_info_read函数

    curl_multi_info_read — 获取当前解析的cURL的相关传输信息 说明 array curl_multi_info_read ( resource $mh [, int &$ ...

  4. UVa 839 Not so Mobile (递归思想处理树)

    Before being an ubiquous communications gadget, a mobilewas just a structure made of strings and wir ...

  5. H5页面前后端通信 (3种方式简单介绍)

    1.ajax:短连接 2.websocket :长连接,双向的.   node搭建的websocket服务器,推送信息给客户端浏览器 :https://www.cnblogs.com/fps2tao/ ...

  6. 膜神犇 DPH

    神犇 DPH 让我写博客.但是,似乎我已经开始写了?!! I am young and naïve!!! Let us orz DPH! 上节课讲DFS,这个是我最擅长的.“暴力出奇迹”!

  7. CentOS 7 & php7.2安装 php-redis 扩展

    CentOS 7 & php7.2安装 php-redis 扩展 1.下载phpredis-developcd /tmpwget https://codeload.github.com/php ...

  8. excel数据生成sql insert语句

    excel数据生成sql insert语句 excel表格中有A.B.C三列数据,希望导入到数据库users表中,对应的字段分别是name,sex,age . 在你的excel表格中增加一列,利用ex ...

  9. Dubbo入门到精通学习笔记(十八):使用Redis3.0集群实现Tomcat集群的Session共享

    文章目录 1.单节点访问http://192.168.1.61:8082/pay-web-boss/: 2.增加多一个消费者节点:192.168.1.62,以同样的方式部署pay-web-boss工程 ...

  10. ubuntu php多版本共存切换

    做开发时,由于本机开发的php版本跟线上发布的php版本不一致,很容易在上线后,发现因版本的影响导致一些bug,但又不想重新去换本机的php版本,那么多版本共存就很方便了!有必要时,切换到指定版本测试 ...