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 ...
随机推荐
- php图片无损压缩的问题解决
代码如下 <?php namespace App\Contract; use Carbon\Carbon; /** * 图片压缩封装类 * @author jackie <2019.11. ...
- [REPRINT] Java 101: Classes and objects in Java
http://www.javaworld.com/article/2979739/learn-java/java-101-classes-and-objects-in-java.html?page=3 ...
- 【InnoDB】缓冲池
索引目录 INNODB的体系结构 缓冲池 缓存中页的定位: checkpoint技术 INNODB的关键特性 插入缓冲 change buffer 两次写 以下的资料总结自:官方文档和<MySQ ...
- CF 1045 H. Self-exploration 解题报告
CF 1045 H. Self-exploration 考虑到串的结构一定是 1...0....1....0.....1... 这样的,而\(01\)与\(10\)在转折点交替出现 首先串长一定是\( ...
- git代码提交步骤
常用的步骤: 1)假如本地想关联git仓库,那么先git init,git remote add origin [git地址] 2)假如是想直接从git仓库拉下来,那么git clone [git地 ...
- (转)图文详解MyEclipse中新建Maven webapp项目的步骤
转:https://blog.csdn.net/ClementAD/article/details/46592557 MyEclipse中创建新的Maven项目(webapp目录结构)过程如下: ...
- winform中的小技巧【自用】
一.C#在WinForm中怎样让多行TEXTBOX的换行 今天做项目,有一段提示文字需要弹出来,由于太长,我就想能不能让它换行.然后就百度了一下,嘿嘿,方法很好用哦. 原文链接:https://blo ...
- kafka 简单安装以及java小demo
文章目录 第1步,下载解压 kafka: 第2步,运行 kafka: 第3步,创建topic 第4步,生产者发送消息 第5步,消费者接收消息 使用 java 客户端 kafka 0.8.0版本demo ...
- 运维 04 Shell基础命令(二)
Shell基础命令(二) 查看Linux的发行版 cat /etc/redhat-release cat /etc/os-release 查看系统用户的id信息 id 用户名 id root id ...
- redis基本介绍搭建篇
1.redis基本介绍 1.1 redis介绍 Redis属于非关系型数据库和Memcached类似,redis也是一个key-value型存储系统. 但redis支持的存储value类型相对更多,包 ...