vue 绑定 class 和 内联样式(style)
<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)的更多相关文章
- v-bind指令动态绑定class和内联样式style
动态绑定class—概述 数据绑定(v-bind指令)一个常见需求是操作元素的 class 列表.因为class是元素的一个属性,我们可以用 v-bind 处理它们 我们只需要计算出表达式最终的字符串 ...
- vue 内联样式style中的background
在我们使用vue开发的时候 有很多时候我们需要用到背景图 这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去 注意 在vue中直接使用style时 花括号一定别忘记 还有就是你的url一定 ...
- vue 内联样式style三元表达式(动态绑定样式)
<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >动态绑定样式</sp ...
- vue学习(九) 使用内联样式设置style样式
/html <div id="app"> //对象就是无序键值对的集合 <h1 :style="{ color:red, 'font-weight':2 ...
- vue.js中内联样式style三元表达式
<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...
- vue里如何灵活的绑定class以及内联style
在我们平常的前端开发中少不了对DOM的操作,以及样式的动态控制,那我们在使用vue的时候该如何灵活的绑定class呢 1.最简单一个class绑定 v-bind:class设置一个对象,可以动态地切换 ...
- Vue.js style(内联样式)
Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...
- Vue 内联样式的数据绑定
Vue 内联样式的数据绑定 之前学的是数据绑定 class,现在可以将数据绑定到 style 中. <div id="app"> <div v-bind:styl ...
- Vue学习之路第十二篇:为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
随机推荐
- 2PC和3PC
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11484077.html 2PC 是计算机网络尤其是在数据库领域内,为了使基于分布式系统架构下的所有节点 ...
- 阿里巴巴下一代云分析型数据库AnalyticDB入选Forrester Wave™ 云数仓评估报告 解读
前言近期, 全球权威IT咨询机构Forrester发布"The Forrester WaveTM: CloudData Warehouse Q4 2018"研究报告,阿里巴巴分析型 ...
- 轻松解决U盘拷贝文件时提示文件过大问题
现在的高科技时代生活中,u盘的使用已经是许多从事电脑it行业的人每天都必须要用到的用具.可以在一台电脑上使用u盘拷贝文件到另外一台电脑上进行使用,加上它的身材小巧,非常方便我们随身携带到任何地方进行使 ...
- TextView详解
android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web /email/phone/map/all)android: ...
- 在Delphi中使用系统对应文件类型的图标
在应用程序的编写中,组合框(ComboBox).列表框(ListBox).等常见的部件,通常不仅要用于显示文字,而且还要显示其与文字相关的图标.在一般的Windows应用程序中,这些图标的显示都要随列 ...
- BZOJ5484: [Usaco2018 Dec]Sort It Out
5484: [Usaco2018 Dec]Sort It Out https://www.lydsy.com/JudgeOnline/problem.php?id=5484 Sol. 考虑没有在被喊叫 ...
- 「SCOI2016」背单词
「SCOI2016」背单词 Lweb 面对如山的英语单词,陷入了深深的沉思,「我怎么样才能快点学完,然后去玩三国杀呢?」.这时候睿智的凤老师从远处飘来,他送给了 Lweb 一本计划册和一大缸泡椒,然后 ...
- CentOS 安装MySQL5.7 源码方式安装
MySQL rpm方式安装:https://www.cnblogs.com/deverz/p/9560403.html 1.卸载已经安装的MySQL yum list installed mysqlr ...
- 82、TensorFlow教你如何构造卷积层
''' Created on 2017年4月22日 @author: weizhen ''' import tensorflow as tf #通过tf.get_variable的方式创建过滤器的权重 ...
- Java关于Math类的三个取整方法
0x01 在java的Math类中有三个关于浮点数取整数的方法,分别是ceil (向上取整) floor(向下取整) round(四舍五入) 三个方法 0x02 ceil 向上取整,取整后总是比原来的 ...