一、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'}" 或者
  :style="'background:url('+arror+') 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绑定属性样式的更多相关文章

  1. v-bind绑定属性样式——class的三种绑定方式

    1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...

  2. vue v-bind绑定属性和样式

    这期跟大家分享的,是v-bind指令.它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式. 绑定属性 最简单的例子,我们有一张图片,需要定义图片的src.我们可以直接在元素的属性里 ...

  3. x:bind不支持样式文件 或 此Xaml文件必须又代码隐藏类才能使用{x:Bind} 解决办法

    这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题 如果是写在Style里,则提示 “x: ...

  4. 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合

    [源码下载] 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合 作 ...

  5. 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧

    [源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...

  6. 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧

    背水一战 Windows 10 之 绑定 x:Bind 绑定 x:Bind 绑定之 x:Phase 使用绑定过程中的一些技巧 示例1.演示 x:Bind 绑定的相关知识点Bind/BindDemo.x ...

  7. 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合

    背水一战 Windows 10 之 绑定 通过 Binding 绑定对象 通过 x:Bind 绑定对象 通过 Binding 绑定集合 通过 x:Bind 绑定集合 示例1.演示如何通过 Bindin ...

  8. js原生设计模式——8单例模式之简约版属性样式方法库

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. Vue 目录结构 绑定数据 绑定属性 循环渲染数据

    一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...

随机推荐

  1. linux平台mysql密码设破解

    1.先停止mysql服务 service mysqld stop 2.启动mysql服务 并跳过权限认证 mysqld_safe --skip-grant-tables 3.打开另外一个终端 登录my ...

  2. dedecms首页调用随机文章全自动时时更新

    dedecms织梦系统是全站生成静态html的,这个对搜索引擎比较友好,但是有时我们要调用文章,让蜘蛛每次来访问都感觉像是有添加新内容一样,要如何做到呢? 可以添加以下dedecms随机文章调用的参数 ...

  3. Linux 线程实现机制分析 Linux 线程模型的比较:LinuxThreads 和 NPTL

    Linux 线程实现机制分析 Linux 线程实现机制分析  Linux 线程模型的比较:LinuxThreads 和 NPTL http://www.ibm.com/developerworks/c ...

  4. elasticsearch 通过外网访问

    elasticsearch 只能通过本地访问 需要修改  network.host: 0.0.0.0. 重新开启:提示错误: ERROR: [2] bootstrap checks failed[1] ...

  5. [na]timewait优化

    解决timewait 加入一条socket配置,重用ip和端口 phone=socket(AF_INET,SOCK_STREAM) phone.setsockopt(SOL_SOCKET,SO_REU ...

  6. Bus System(Flody)

    http://acm.hdu.edu.cn/showproblem.php?pid=1690 坑爹的题,必须用__int64 %I64d(以前没用过) 因为这题的数据特别大,所以用-1 #includ ...

  7. c#图像灰度化、灰度反转、二值化

    图像灰度化:将彩色图像转化成为灰度图像的过程成为图像的灰度化处理.彩色图像中的每个像素的颜色有R.G.B三个分量决定,而每个分量有255中值可取,这样一个像素点可以有1600多万(255*255*25 ...

  8. myeclipse连接sql server2008 r2数据库

    我用的myeclipse自带的jdk1.6连接的,所以选用sqljdbc4.jar的jar包,我是win7电脑 之前也看到一些用户留的微软官方连接,但是官方那边已经取消下载了,所以我重新去找了下 链接 ...

  9. <转>ORACLE EBS中查看某个Request的Output File

    由于某些权限的限制,有时候哪怕System Administrator职责也只能看到某个Request信息,但是不能查看它的Output File(在“Requests Summary”窗口中“Vie ...

  10. 187. Repeated DNA Sequences(建立词典,遍历一遍 o(n))

    All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...