<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. php结合Redis实现100万用户投票项目,并实时查看到投票情况的案例

    场景:某网站需要对其项目做一个投票系统,投票项目上线后一小时之内预计有100万用户进行投票,希望用户投票完就能看到实时的投票情况 这个场景可以使用redis+mysql冷热数据交换来解决. 何为冷热数 ...

  2. 【leetcode】985. Sum of Even Numbers After Queries

    题目如下: We have an array A of integers, and an array queries of queries. For the i-th query val = quer ...

  3. Vue学习笔记【31】——Vue路由(computed计算属性的使用)

    computed计算属性的使用 默认只有getter的计算属性:  <div id="app">    <input type="text" ...

  4. 【LeetCode 41】缺失的第一个正数

    题目链接 [题解] 先明确一点假设给的数字有n个. 那么最后的答案最情况下就是n+1 首先我们先判断一下所给的数组里面有没有1 如果没有直接返回1 否则. 把数组中所有的范围超过n或者小于1的数字全都 ...

  5. 大碗宽面Beta迭代阶段博客目录

    大碗宽面Beta迭代阶段博客目录 Githhub:https://github.com/rz-2000/Course-Evaluation 一.Scrum Meeting 1. [第十周会议记录]ht ...

  6. 【开源项目】一篇文章搞掂:Pig微服务框架

    1.项目开发环境和运行步骤 1.1.项目开发环境 Idea:2018.1.6 Maven:3.5.3 JDK:1.8.0_172 MySQL:5.7.19(之前安装8.0.11会运行失败) Redis ...

  7. LInux终端中Ctrl+S卡死

    因为初学Linux,在vim中写东西是总是喜欢按Ctrl+s来保存内容导致终端突然卡主,然后上网查资料发现了Ctrl+s 暂停屏幕输出[锁住终端]而对应的按键是Ctrl+q 恢复屏幕输出[解锁终端]

  8. 04 循环结构概述和for语句的格式及其使用

    04.01_Java语言基础(循环结构概述和for语句的格式及其使用) A:循环结构的分类 for,while,do…while B:循环结构for语句的格式: for(初始化表达式;条件表达式;循环 ...

  9. Rust <8>:lifetime 高级语法与 trait 关联绑定

    一.生命周期关联:如下声明表示,'s >= 'c struct Parser<'c, 's: 'c> { context: &'c Context<'s>, } ...

  10. activiti7查询历史数据

    package com.zcc.activiti02; import org.activiti.engine.HistoryService;import org.activiti.engine.Pro ...