|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2018-9-6 18:14 编辑
上一讲我们搞定了计算属性的玩法，本次来学习用对象语法来绑定class。
在006 V 指令+事件+语法糖我们介绍了v-bind，以及其简略写法":"。
我们给v-bing:class设置一个对象，达到动态切换class，代码：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
- <meta name="description" content="《Vue-庖丁解牛》案例演示">
- <meta name="author" content="鱼C工作室">
- <title>鱼C-Vue</title>
- <script src="js/vue.js"></script>
- </head>
- <body>
- <div id="myApp">
- <div :class="{'active':isActive}"></div>
- </div>
- <script>
- var app = new Vue({
- el:"#myApp",
- data:{
- isActive:true
- }
- })
- </script>
- </body>
- </html>
在这段代码中，类名active依赖于数据isActive，当为true，div会拥有类名Active。
反之，false，则不会添加类名。
最终渲染结果：
对象中还可以传入多个属性，这样就能切换多个属性，:class(v-bind:class)可以和普通的class共存。
创建div：
- <div id="myApp">
- <div class="fishc" :class="{'active':isActive,'error':isError}"></div>
- </div>
内层div有一个默认的普通类名fishc，然后通过:classs添加了两个类名（均为真才会添加）。
创建Vue实例：
- <script>
- var app = new Vue({
- el:"#myApp",
- data:{
- isActive:true,
- isError:false
- }
- })
- </script>
在Vue实例中，isActive为true，成功添加isActive类；isError为false，所以添加失败。
现在修改isError为true：
当:class的表达式过长或者逻辑复杂时，还可以绑定一个计算属性，很常用的用法。
一般当条件多于两个时，可以使用data或computed。
创建div：
- <div id="myApp">
- <div :class="myClass"></div>
- </div>
创建Vue实例：
- <script>
- var app = new Vue({
- el:"#myApp",
- data:{
- isActive:true,
- isError:null
- },
- computed:{
- myClass:function () {
- return{
- active:this.isActive && !this.error,
- 'text-fail':this.error && this.error.type == 'fail'
- }
- }
- }
- })
- </script>
我们把复杂的表达式独立出来，放在computed中通过计算属性来完成。
课后作业
1、:class可以和普通的class共存？（T/F）
2、完成修改isError，为div添加isError类
答案：
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢Vue，请订阅 专辑（ 传送门）（ 不喜欢更要订阅 ）
|
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-9-6 17:36:16
置顶卡
千斤顶
显身卡
发表于 2018-10-11 15:08:33
发表于 2018-11-26 23:27:28
