class && style

class

  1. 为什么要绑定类名?
  • 数据–驱动–》视图 数据–控制–》类名 -->样式
  1. 类名 要和 数据 绑定 —使用 —》 v-bind
  2. 类名的绑定方式
  • 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表示, 它的值是一个对象
  • 计算属性的值中存放的是方法
  1. computed vs methods
  • 同: 都是函数, 都可以书写逻辑
  • 异: methods中的方法运行依赖于事件或是方法调用 举例 @click = eventFnName {{ eventFnName() }}
    但是computed的方法名可以直接当做变量一样用, 类似于直接在data中定义的数据
  1. 项目中如果发现以下两个特点, 就是用计算属性
  • 有逻辑
  • 使用类似变量

todolist

  1. ui库
    sui
  2. 使用:
    引入第三方库: cdn
  3. 业务:
  4. 开关的切换
  5. 点击编辑, 出现一个弹框, 当我们键盘回车的是将, 将input框中的内容展示在页面上
  6. 当任务已完成时, 点击 删除 按钮 直接删除 , 当任务未完成时, 应该先出用户友好提示, 如果点击了确定, 在删除, 如果不点确定, 不能删除
  7. 底部按钮拥有不同的类名
  8. 底部按钮点谁 , 谁激活 — 》 加一个button-fill类名
  • 先随便起个名字, 然后判断这个名字和数据中名字是否对应, 如果对应就激活, 如果不对应就不激活
  1. 将数据进行分类
    分析: 列表渲染的数据 todos必须改变
  2. 有逻辑
  3. 使用的话 要想变量一样使用
    解决: 计算属性
Logo

前往低代码交流专区

更多推荐