3-4 3.4class绑定ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

《3-4 3.4class绑定ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《3-4 3.4class绑定ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、3-4 3.4 class绑定教学课件 Vue.js基础与应用开发实战（微课版）3.4 class绑定3.4.1 对象绑定class1为v-bind:class绑定一个对象可以为v-bind:class绑定一个对象，从而动态地切换class，例如：这里的class active的更新将取决于数据属性isActive是否为真值（true）。【实例3-11】使用v-bind指令实现简单class绑定【操作要求】创建网页0311.html，使用v-bind指令实现简单class绑定一个对象，从而动态地切换class，输出的文本内容是否应用指定的样式style1，取决于数据属性isActive是否为真

2、值（true）。【实现过程】使用HTML编辑器Dreamweaver创建网页0311.html，在该网页中编写以下代码实现要求的功能。info var vm=new Vue(el:#app,data:info:请登录,isActive:true )其中类style1的属性设置如下：.style1 font-size:24px;font-weight:bold;color:purple;2在对象中传入多个属性可以在对象中传入多个属性来动态切换多个class，v-bind:class指令可以与普通的class属性共存。【实例3-13】为v-bind:class绑定返回对象的计算属性【操作要求】创建

3、网页0313.html，为v-bind:class绑定返回对象classObject的计算属性，对象classObject包括3个数据的返回值，分 别 为 base:true，active:this.isActive&!this.error.value，text-danger:this.error.value&this.error.type=fatal。【实现过程】使用HTML编辑器Dreamweaver创建网页0313.html，在该网页中编写以下代码实现要求的功能。info var vm=new Vue(el:#main,data:info:请登录,isActive:true,error:

4、value:false,type:fatal ,computed:classObject:function()return base:true,active:this.isActive&!this.error.value,text-danger:this.error.value&this.error.type=fatal )上述代码中，this.isActive的值为true，!this.error.value的值为true，所以active的值为true；this.error.value的 值 为 false，this.error.type的 值 为fatal，即this.error.typ

5、e=fatal的值为true，所以text-danger的值为false。最终网页中的文本内容的样式由base和active共同起作用。3.4.3 组件绑定class在一个定制组件上用到class属性时，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖.【示例】：demo030403.html代码如下：Vponent(my-component,template:欢迎登录)var app=new Vue(el:#app)HTML最终将被渲染为如下所示:欢迎登录同样也适用于绑定HTML class。例如：Vponent(my-component,template:欢迎登录)var app=new Vue(el:#app,data:isActive:true )HTML最终将被渲染为如下所示:欢迎登录快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！