v-bind绑定属性样式
一、class的四种绑定方式
1、布尔值的绑定方式
<div id="demo">
<span v-bind:class="{'class-a':isA ,'class-b':isB}"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
isA: true,
isB: true
}
})
2、变量的绑定方式
<div id="demo">
<span :class=[classA,classB]></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
classA:"class-a",
classB:"class-b"
}
})
3、字符串绑定方式
<div id="demo">
<span :class="classA"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
classA:"string"
}
})
4、三目运算
<div id="demo">
<p :class="isclass?classC:classD"></p>
</div>
var vm = new Vue({
el:"#demo",
data:{
classC:"C",
classD:"D",
isclass:true
}
})
5、综合的写法
<div id="demo">
<span :class="[one,{'classA':classa,'classB':classb}]"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
one:"string",
classa:true,
classb:false
}
})
<p :style="{fontSize:font,color:red}">绑定style</p>
背景图片写法 链接有()会和css的url()冲突,需要再用一层引号将其包住
:style="{background:'url(\''+item.img+'\') no-repeat center/cover'}" 或者
<p :style="styleObject">用对象绑定style</p>
data:{
font:"24px",
red:"red",
styleObject:{
fontSize:"30px",
color:"pink"
}
}
在methods和computed中写样式用return返回
在methods方法中使用
:style="_sublineStyle(item)" _sublineStyle (item) {
return `-webkit-transform:rotate(${item}deg) translateX(-50%);transform:rotate(${item}deg) translateX(-50%);`
}, 在computed计算属性中使用
:style="[diameter]" diameter () {
return {
width: this.r * 2 + 'px',
height: this.r * 2 + 'px'
}
}
v-bind绑定属性样式的更多相关文章
- v-bind绑定属性样式——class的三种绑定方式
1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...
- vue v-bind绑定属性和样式
这期跟大家分享的,是v-bind指令.它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式. 绑定属性 最简单的例子,我们有一张图片,需要定义图片的src.我们可以直接在元素的属性里 ...
- x:bind不支持样式文件 或 此Xaml文件必须又代码隐藏类才能使用{x:Bind} 解决办法
这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题 如果是写在Style里,则提示 “x: ...
- 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合
[源码下载] 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合 作 ...
- 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
[源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...
- 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
背水一战 Windows 10 之 绑定 x:Bind 绑定 x:Bind 绑定之 x:Phase 使用绑定过程中的一些技巧 示例1.演示 x:Bind 绑定的相关知识点Bind/BindDemo.x ...
- 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合
背水一战 Windows 10 之 绑定 通过 Binding 绑定对象 通过 x:Bind 绑定对象 通过 Binding 绑定集合 通过 x:Bind 绑定集合 示例1.演示如何通过 Bindin ...
- js原生设计模式——8单例模式之简约版属性样式方法库
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Vue 目录结构 绑定数据 绑定属性 循环渲染数据
一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...
随机推荐
- vue使用resource传参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- selenium webdriver窗口切换(上)
selenium webdriver窗口切换,有时候在做自动化的时候需要打开很多很多的页面, 当在操作不同的页面的时候需要切换窗口,下面是如何切换到前后页面窗口的操作: package test201 ...
- Object之wait
一.源码. 1.公共本地,且可继承但不可重写. 2.公共,且可继承但不可重写. 3.公共,且可继承但不可重写. 二.解释. 1.因为这些方法是Object类中的非静态的public方法,而任何其他类都 ...
- System.arraycopy方法详解
- php 5.0 新字符串
简介:新字符串以“<<<”开始,后边紧跟子字符串标记,之后为字符串内容,最后用标记和分号结束. 说明:"<<<标记"后不要有空格符,否则可能出现 ...
- 全局监听SCREEN_ON和SCREEN_OFF的替代方法--监听屏幕解锁事件
在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使 ...
- 数据仓库基础(九)Informatica小技巧(1)
本文转载自:http://www.cnblogs.com/evencao/p/3148373.html link path:查看某个字段的来源去处,非常有参考的价值.右击你想要看的字段,选择 sele ...
- addEventListener的click和onclick的区别
前两节都和addEventListener的click有关,于是在想它与onclick有什么区别呢,自己调试了一下,网上也有相关资料 事件绑定 onclick绑定方式 优点: - 简洁 - 处理事件的 ...
- 5+App使用定位
1.定位方法 5+App定位方法:5+ API中的Geolocation模块 Geolocation目前支持h5内置的定位,百度,高德.h5内置定位支持wgs84坐标系:百度支持gcj ...
- Linux vmstat命令实际操作介绍
vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.它能够对系统的整体情况进行统计,无法对某个进程进行深入分析. ...