VUE的class style 计算属性

class && style

class

1. 为什么要绑定类名？

• 数据–驱动–》视图 数据–控制–》类名 -->样式

2. 类名 要和 数据 绑定 —使用 —》 v-bind
3. 类名的绑定方式

• A: 对象的形式

<div :class = "{'size': classFlag,'bg': classFlag}"></div>

注意： 对象中的key用字符表示

• B: 数组的形式

         <div :class = "['size','bg']"> </div>
          <div :class = "[size,bg]"> </div>
         <div :class = "[classFlag?size:bg]"> </div>
  

style

1. 为什么要绑定样式呢？

• A: 样式有几种使用形式

1. style双标签嵌入样式(内联)
2. 行内样式
3. 外部引用
4. @import(’./csss/…’)

• 数据 --控制–样式—》 功能 效果
• 样式 要和 数据 绑定–》 v-bind
• 样式的绑定形式
• A: 对象

<div :style = "{width:'50px'}"></div>
<div :style = "style"></div>

第二种将数据放在data中

• B: 数组

<div
:style = "[{width:'50px',height:'50px',background:'yellow'}]"
></div>
<div
:style = "[style]"
></div>
<div
:style = "[styleFlag?style:'']"
></div>

计算属性

1. 为什么要有计算属性？
2. 直接模板语法中直接写逻辑 // 1.html结构不纯粹 2. 写起来不舒服
3. 方法运行 // 但是语义性不高
4. 计算属性是什么？

• 计算属性是new Vue(options) options中的一个配置项， 用computed表示， 它的值是一个对象
• 计算属性的值中存放的是方法

3. computed vs methods

• 同： 都是函数， 都可以书写逻辑
• 异： methods中的方法运行依赖于事件或是方法调用 举例 @click = eventFnName {{ eventFnName() }}
  但是computed的方法名可以直接当做变量一样用， 类似于直接在data中定义的数据

4. 项目中如果发现以下两个特点， 就是用计算属性

• 有逻辑
• 使用类似变量

todolist

1. ui库
   sui
2. 使用：
   引入第三方库： cdn
3. 业务：
4. 开关的切换
5. 点击编辑， 出现一个弹框， 当我们键盘回车的是将， 将input框中的内容展示在页面上
6. 当任务已完成时， 点击 删除 按钮 直接删除 ， 当任务未完成时， 应该先出用户友好提示， 如果点击了确定， 在删除， 如果不点确定， 不能删除
7. 底部按钮拥有不同的类名
8. 底部按钮点谁 ， 谁激活 — 》 加一个button-fill类名

• 先随便起个名字， 然后判断这个名字和数据中名字是否对应， 如果对应就激活， 如果不对应就不激活

6. 将数据进行分类
   分析： 列表渲染的数据 todos必须改变
7. 有逻辑
8. 使用的话 要想变量一样使用
   解决： 计算属性