vue 绑定 class 和 内联样式(style)

时间:2022-08-27 00:01:50
 <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学习&lpar;九&rpar; 使用内联样式设置style样式

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

  5. vue&period;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&period;js style&lpar;内联样式&rpar;

    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. &lbrack;Tip&rsqb;重写PanGestureRecognizer

    目标 识别当前pan方向是指定方向 需要API 重写- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; 获取所在view ...

  2. 【CodeVS 3153】取石子游戏

    http://codevs.cn/problem/3153/ 对于这道题,直觉告诉我每一个状态一定是必胜或必败的 然后设定操作次数t,t为取完些石子最多需要多少步. 如果\(a_i\)不为1,\(t= ...

  3. &period;gitigore 相关

    为什么要配置.gitigore 在我们使用git的过程当中,不是任何文件都需要commit到本地或者远程仓库的,比如一些三方库文件.那么作为一个git新手,很多人不知道如何配置.gitignore文件 ...

  4. 关于throw、throws、try--catch的问题

    首先回顾概念 throws表示出现异常的一种可能性,并不一定会发生这些异常 throw则是抛出了异常,执行throw则一定抛出了某种异常 try--catch try语句用大括号{}指定了一段代码,该 ...

  5. MPP架构海量数据分析仓库——Greenplum介绍

    一.Greenplum背景 时间回到2002年,互联网行业经过近10年的发展,数据量正处于快速增长期: 1.传统的主机计算模式在海量数据面前,除了造价昂贵外,在CPU计算和IO吞吐上不能满足海量数据的 ...

  6. linux下mysql的启动与关闭

    1.查看mysql版本 方法一:status; 方法二:select version(); 2.Mysql启动.停止.重启常用命令 a.启动方式 1.使用 service 启动: [root@loca ...

  7. Oracle中rownum的基本用法

    Oracle中rownum的基本用法 对于rownum来说它是oracle系统顺序分配为从查询返回的行的编号,返回的第一行分配的是1,第二行是2,依此类推,这个伪字段可以用于限制查询返回的总行数,且r ...

  8. Java从URL获取PDF内容

    Java直接URL获取PDF内容 题外话 网上很多Java通过pdf转 HTML,转文本的,可是通过URL直接获取PDF内容,缺没有,浪费时间,本人最近工作中刚好用到,花了时间整理下,分享出来,防止浪 ...

  9. Layui 获取 radio的值

    var OutInvoiceType = $('#OutInvoiceType input[checked]').val();   就可以获取到了.

  10. POJ 1065 Wooden Sticks (贪心)

    There is a pile of n wooden sticks. The length and weight of each stick are known in advance. The st ...