class && style
class
- 为什么要绑定类名？
- 数据–驱动–》视图 数据–控制–》类名 -->样式
- 类名 要和 数据 绑定 —使用 —》 v-bind
- 类名的绑定方式
注意： 对象中的key用字符表示 * B: 数组的形式
### style 1. 为什么要绑定样式呢？ * A: 样式有几种使用形式 1. style双标签嵌入样式(内联) 2. 行内样式 3. 外部引用 4. @import('./csss/....') * 数据 --控制--样式---》 功能 效果 * 样式 要和 数据 绑定--》 v-bind * 样式的绑定形式 * A: 对象
第二种将数据放在data中 * B: 数组
## 计算属性 1. 为什么要有计算属性？ 1. 直接模板语法中直接写逻辑 // 1.html结构不纯粹 2. 写起来不舒服 2. 方法运行 // 但是语义性不高 2. 计算属性是什么？ * 计算属性是new Vue(options) options中的一个配置项， 用computed表示， 它的值是一个对象 * 计算属性的值中存放的是方法 3. computed vs methods * 同： 都是函数， 都可以书写逻辑 * 异： methods中的方法运行依赖于事件或是方法调用 举例 @click = eventFnName {{ eventFnName() }} 但是computed的方法名可以直接当做变量一样用， 类似于直接在data中定义的数据 4. 项目中如果发现以下两个特点， 就是用计算属性 * 有逻辑 * 使用类似变量 ## todolist 1. ui库 sui 2. 使用： 引入第三方库： cdn 3. 业务： 1. 开关的切换 2. 点击编辑， 出现一个弹框， 当我们键盘回车的是将， 将input框中的内容展示在页面上 3. 当任务已完成时， 点击 删除 按钮 直接删除 ， 当任务未完成时， 应该先出用户友好提示， 如果点击了确定， 在删除， 如果不点确定， 不能删除 4. 底部按钮拥有不同的类名 5. 底部按钮点谁 ， 谁激活 --- 》 加一个button-fill类名 * 先随便起个名字， 然后判断这个名字和数据中名字是否对应， 如果对应就激活， 如果不对应就不激活 6. 将数据进行分类 分析： 列表渲染的数据 todos必须改变 1. 有逻辑 2. 使用的话 要想变量一样使用 解决： 计算属性