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 ...
随机推荐
- 记录 SpringBoot 踩坑经历
1.spring-boot-starter-web 作用 <dependency> <groupId>org.springframework.boot</groupId& ...
- 【dart学习】-- Dart之网络请求操作
Flutter的请求网络有多种方式,一种是使用dart io中的HttpClient发起的请求,一种是使用dio库,另一种是使用http库,先学一下get和post,put.delete就等后面用到在 ...
- 【Linux】【sendmail】利用sendmail发送带附件的邮件及解决邮件中文标题乱码
#收件邮箱列表 TO_LIST=$1 #邮件标题 MAIL_TITLE=$2 #附件地址 LOG_PATH=$3 fromAdd="=?UTF-8?B?`echo $MAIL_TITLE | ...
- delphi遍历指定目录下指定类型文件的函数
遍历指定目录下指定类型文件的函数// ================================================================// 遍历某个文件夹下某种文件,/ ...
- Angular项目中迭代生成的树,激活选中的节点,并将节点数据发送到父节点
从后台返回的数据,还有多层子节点,需要一个生成树的组件,如果直接在页面上写循环来拼接感觉会很麻烦,因为数据的层级结构不固定. 参考网上其他人的方法,整理如下: 1. 创建一个用于循环迭代的组件,在父组 ...
- PHP浮点计算结果返回异常问题
php中如果直接小数点进行计算的话.比如16.8*3var_dump是50.4.但是return就变成了50.400000000000006.至于是什么原因本人尚不得而知.解决方法是用把计算放入下面的 ...
- java.lang.String中的replace方法到底替换了一个还是全部替换了。
你没有看错我说的就是那个最常用的java.lang.String,String可以说在Java中使用量最广泛的类了. 但是我却发现我弄错了他的一个API(也可以说是两个API),这个API是关于字符串 ...
- 建立logback.xml 配合MDC 实现追踪
<?xml version="1.0" encoding="UTF-8"?> <configuration debug="false ...
- CSS3 resize 属性
CSS3 resize 属性 CSS 参考手册 实例 规定可以由用户调整 div 元素的大小: div { resize:both; overflow:auto; } 支持 Firefox 4+.Ch ...
- 泛微oa系统com.eweaver.base.DataAction文件sql参数sql注入
URL/ServiceAction/com.eweaver.base.DataAction?sql=select%201,2,3,4,5,6,7,8,9,233%20from%20DUAL%20