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 ...
随机推荐
- 【leetcode】974. Subarray Sums Divisible by K
题目如下: Given an array A of integers, return the number of (contiguous, non-empty) subarrays that have ...
- Anaconda 安装 pytorch报错解决方法
一.安装Pytorch: # -c 指定用pytorch镜像源下载软件conda install pytorch torchvision cpuonly -c pytorch 报错: 二.配置: ch ...
- python dir()详解
Python dir() 函数 Python 内置函数 描述 dir() 函数不带参数时,返回当前范围内的变量.方法和定义的类型列表:带参数时,返回参数的属性.方法列表.如果参数包含方法__dir__ ...
- sigaction函数学习
sigaction(查询或设置信号处理方式) 相关函数 signal,sigprocmask() ,sigpending,sigsuspend, sigemptyset 表头文件 #include&l ...
- BZOJ 3207: 花神的嘲讽计划Ⅰ(莫队+哈希)
传送门 解题思路 刚开始写了个莫队+哈希+\(map\)的\(O(n\sqrt(n)log(n)\)的辣鸡做法,\(T\)飞了.后来看了看别人博客发现其实并不用拿\(map\)当桶存那些哈希值.因为只 ...
- GIT上传下载报错:[You do not have permission to pull from the repository]的解决方案!
第一步:打开我的电脑 第二步:选择此电脑,右击弹出框点击属性进入控制面板 第三步:进入控制面板 第四步:搜索管理凭据 第五步:编点击右侧按钮,进行编辑用户名和密码的操作添加凭据 git:https:/ ...
- [CSP-S模拟测试62]题解
A.Graph 因为点可以随便走,所以对于每个联通块,答案为边数/2向下取整. 用类似Tarjan的方式,对于每个联通块建立一棵搜索树,尽量让每一个节点的儿子两两配对,如果做不到就用上头顶的天线. # ...
- windows下tomcat7+nginx1.8负载均衡
1.负载平衡是一种常用的跨多个应用程序实例 技术优化资源利用率,最大化吞吐量, 减少延迟,并确保容错配置. 2.使用nginx作为非常有效的HTTP负载均衡器 将流量分发给几个应用程序服务器和改善 性 ...
- PHP面试 MySQL的高可扩展和高可用
MySQL的高可扩展和高可用 面试题一 MySQL分表和分区的工作原理,分表和分区的使用场景和优缺点. 分区表的原理 对用户而言,分区表时一个独立的逻辑表,但是底层MySQL将其分成了多个物理子表,这 ...
- 引入iframe, 头部跳转并点亮效果
<script> /** * @Author: zhangcs * @Date: 2018-09-20 * @cnblogs: https://www.cnblogs.com/zhangc ...