<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. OpenCV常用基本处理函数(2)图像基本操作

    可以根据像素的行和列的坐标获取他的像素值.对 BGR 图像而言,返回值为 B,G,R 例如获取蓝色的像素值: img=cv2.imread('messi5.jpg')px=img[100,100]bl ...

  2. Quartz.Net 任务调度之特性(3)

    再实现类中使用,就是继承IJob的类 [PersistJobDataAfterExecution] //执行后的保留作业数据,链式传参(上一次的任务数据) [DisallowConcurrentExe ...

  3. vi快捷操作

    全部删除: 按esc键后,先按gg(到达顶部),然后dG 全部复制: 按esc键后,先按gg,然后ggyG 全选高亮显示: 按esc键后,先按gg,然后ggvG或者ggVG 单行复制: 按esc键后, ...

  4. c#发送邮件功能

    protected void Page_Load(object sender, EventArgs e)    {        //先到qq邮箱设置中启用smtp服务        Random r ...

  5. python locust_TaskSet声明任务的典型方法是使用task装饰器的两种方法

    为TaskSet声明任务的典型方法是使用task装饰器.该min_wait和MAX_WAIT属性也可以在使用taskset类中重写. from locust import Locust, TaskSe ...

  6. 解决ios下部分手机在input设置为readonly属性时,依然显示光标

    解决ios下部分手机在input设置为readonly属性时,依然显示光标 在出现如上所说的问题是尝试给input 加上  onfocus="this.blur()"  方法 添加 ...

  7. 屏蔽浏览器默认样式 user agent stylesheet

    user agent stylesheet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. python基础-包和模块

    Python基础-包与模块 写在前面 如非特别说明,下文均基于Python3 摘要 为重用以及更好的维护代码,Python使用了模块与包:一个Python文件就是一个模块,包是组织模块的特殊目录(包含 ...

  9. java 子类对象实例化的过程

    大家往往听说  子类继承了父类就有了父类中的所有的非私有的属性,但是怎么就有了父类的属性了呢 ?且听下面分解 子类对象实例化的过程: 1 从结果上来看:(继承性) 子类继承了父类以后 就获取了父类中声 ...

  10. VS2008中所有快捷键

    转载自:http://itfocus.diandian.com/post/2011-09-16/5091994 微软开发环境的可视化界面做的很全面,几乎所有的操作都可以通过可视化界面完成,但是你是否在 ...