一、对象语法绑定class属性

class的属性代码如下

	<style type="text/css">
.red{
color: red;
width: 100px;
height: 100px;
border: 2px;
border-color: blue;
border-style: solid; } </style>

  

1、用之前的方法绑定一下class属性

<div class="red">11111111111</div>

  

2、使用v-bind的方式,绑定一个字符串

<!-- 绑定的方式1,写一个字符串 -->
<div v-bind:class="'red'">22222222222222</div>

  

3、使用v-bind的方式,绑定一个属性

		<!-- 绑定的方式2,写一个属性 -->
<div v-bind:class="cls">3333333333333</div>

  

4、使用v-bind的方式,绑定一个对象

		<!-- 绑定的方式3,写一个对象,当isred为true,则加上这个类,如果isred为false,则不加这个类 -->
<div v-bind:class="{red:isRed}">444444444444444</div>

  

这里还需要在vue对象中定义isRed这个属性

5、使用v-bind的方式,绑定一个计算属性

		<!-- 绑定的方式4,写一个计算属性的get方法 -->
<div v-bind:class="classObj">55555555555</div>

  

还需要定义一个get方式的计算属性

二、数组语法绑定class属性

先看css的class属性

	<style type="text/css">
.red{
color: red;
width: 200px;
height: 200px;
border: 2px;
border-color: blue;
border-style: solid; }
.bg{
background-color: yellow;
} </style>

  

1、使用v-bind的方式,绑定一个数组模式的class属性

<div v-bind:class="[class1,class2]">22222222</div>

  

当然我们还需要在vue实例中定义这2个属性的值

2、使用v-bind绑定一个三元运算符

<div v-bind:class="[isActive?class1:class2]">3333333</div>

  

当然我们还需要在vue实例中定义isActive这个属性,如果该属性为真,则添加class1对应的class样式,如果该属性为false,则添加class2对应的class样式

3、还可以在数组中写一个对象,同样使用v-bind语法

<div v-bind:class="[{'bg':isActive},class1]">44444444</div>

  

如果isActive为真,则添加bg这个class属性,所以我们需要在vue的实例对象中定义isActive这个属性

4、同样这里也可以写一个计算属性

<div v-bind:class="classComputed">555555</div>

  

同样看下计算属性这个方法是怎么写的

5、直接绑定一个属性

<div v-bind:class="classobj">6666666</div>

  

同样需要定义一个属性

三、绑定html到组件上

先写一个组件

		Vue.component('tou', {

		  template: `<div>
<input type="button" value="弹出" v-on:click="alertfunction">
<div>内容区域</div>
</div>`,
// 这里就是头部组件中的代码
methods:{
alertfunction:function(){
alert(123);
}
} })

  

然后使用这个组件

	<div id="app">
<tou v-bind:class="classobj"></tou> </div>

  

最后我们定义classobj这个对象

如果我们给组件添加class属性,是把class属性添加到组件的根元素上,且是追加的方式添加class属性,不会被覆盖原有的属性

根元素就是div标签

四、绑定内联样式

1、默认的绑定方式

	<div style="height:100px;width=100px;color:red;border-style: solid;">1</div>

  

2、对象的语法

<div v-bind:style="{'height':h,'width':w,'color':r,'border-style':s}">2</div>

  

我们还需要在vue实例中定义属性

3、同样也可以绑定一个对象

<div v-bind:style="styleObj">3</div>

  

对象按照下面的格式写

4、传递一个数组对象进去

<div v-bind:style="[styleObj,styleObj2]">4</div>

  

同样我们需要定义这2个对象

vue绑定html的class属性的方法的更多相关文章

  1. Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  2. vue自带的实例属性和方法($打头)

    Vue 实例内置了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = new Vue({ el: '#examp ...

  3. 04: vue生命周期和实例属性和方法

    1.4 组件的生命周期 1.说明 1. Vue将组件看成是一个有生命的个体,跟人一样,定义了各个阶段, 2. 组件的生命周期:组件的创建过程 3. 组件生命周期钩子函数:当组件处在某个阶段,要执行某个 ...

  4. Vue生命周期,计算属性、方法、侦听器

    vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...

  5. vue.js使用之计算属性与方法返回的差别

    <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@2.4.2&quo ...

  6. Vue基础练习之计算属性、方法、监听器

    <body> <div id="root"> {{fullName()}} {{age}} </div> <script> var ...

  7. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  8. vue 绑定属性 绑定Class 绑定style

    <template> <div id="app"> <h2>{{msg}}</h2> <br> <div v-bi ...

  9. vue实例的属性和方法

    vue实例的属性和方法 1. 属性 vm.$el #指定要绑定的元素 vm.$data #Vue 实例的数据对象 vm.$options #获取自定义属性的值 new Vue({ customOpti ...

随机推荐

  1. Tarjan求割点&桥

    概念 1.桥:是存在于无向图中的这样的一条边,如果去掉这一条边,那么整张无向图会分为两部分,这样的一条边称为桥无向连通图中,如果删除某边后,图变成不连通,则称该边为桥. 2.割点:无向连通图中,如果删 ...

  2. R语言中的字符串处理函数

    内容概览   尽管R是一门以数值向量和矩阵为核心的统计语言,但字符串有时候也会在数据分析中占到相当大的份量.   R语言是一个擅长处理数据的语言,但是也不可避免的需要处理一些字符串(文本数据).如何高 ...

  3. 虚拟化cpu

    vmware的虚拟机cpu [root@84-monitor ~]# lscpuArchitecture:          x86_64CPU op-mode(s):        32-bit, ...

  4. idc市场

    机房 idc服务商 ============================== 电信1.古城热线-西部数据中心于2001年正式投入运营,有经济技术开发区和高新技术产业开发区两个核心机房高新路电信广场 ...

  5. socket资源

    http://www.360doc.com/content/13/1231/16/14919052_341525862.shtml Linux下基于socket多线程并发通信的实现 https://w ...

  6. redis 5.0.3 讲解、集群搭建

    REDIS 一 .redis 介绍 不管你是从事Python.Java.Go.PHP.Ruby等等... Redis都应该是一个比较熟悉的中间件.而大部分经常写业务代码的程序员,实际工作中或许只用到了 ...

  7. 怎样生成一个顶点迭代器(MItMeshVertex)

    最近修改一个maya中的jlCollisionDeformer工具,该工具有一个明显不足,变形后顶点分布太乱,无法满足生产需求.于是考虑对该变形后的顶点进行平滑处理.既然要做平滑处理就要获取当前点及与 ...

  8. 前端-JavaScript1-2——JavaScript建立认知

    关于首篇的“ Hello world ! ”这事儿吧,挺有意思,就是学习任何的语言,我们都喜欢在屏幕上直接输出一点什么,当做最简单.最基本的案例.输出什么大家随意,但是很多人都习惯输出“hello w ...

  9. mysql-查询存在主表但是不存在副标的数据

    A.B两表,找出ID字段中,存在A表,但是不存在B表的数据.A表总共13w数据,去重后大约3W条数据,B表有2W条数据,且B表的ID字段有索引. 方法一 使用 not in ,容易理解,效率低  ~执 ...

  10. Python【每日一问】03

    问:请给出下列代码的执行结果,并解释 a = dict.fromkeys([6, 7, 8], ["testing", {"name": "ken&q ...