顺的网站建设多少钱,网站应具有的功能模块,网页区设计网站诊断,如何制作微信打卡小程序文章目录1. 绑定样式1.1 绑定 class 样式1.2 绑定 style 样式2. 条件渲染2.1 v-show2.2 v-if3. 列表渲染3.1 v-for3.2 key 的作用与原理3.3 列表过滤3.4 列表排序1. 绑定样式 说 绑定样式 前#xff0c;先准备好 以下几个 样式 : style.basic {width: 400px;height: 1…
文章目录1. 绑定样式1.1 绑定 class 样式1.2 绑定 style 样式2. 条件渲染2.1 v-show2.2 v-if3. 列表渲染3.1 v-for3.2 key 的作用与原理3.3 列表过滤3.4 列表排序1. 绑定样式 说 绑定样式 前先准备好 以下几个 样式 : style.basic {width: 400px;height: 100px;border: 1px solid black;}/* happy , sad , normal 三选一 */.happy {渐变 : background-image: linear-gradient(180deg, rgb(247, 132, 132), rgb(241, 241, 80));}.sad {背景background-color: gray;边框border: 3px dashed green;}.normal {背景颜色background-color: skyblue;}.test1 {背景颜色background-color: rgb(140, 244, 195);}.test2 {字体大小font-size: 50px;字体阴影text-shadow: 2px 2px 5px red;}.test3 {圆角边框border-radius: 20px;background-color: yellow}/style关于这些样式可以在 CSS 教程 (w3school.com.cn) 上学习到 . 1.1 绑定 class 样式 下面就 开始 学习 vue 中的绑定样式 注意 当前 相当于 在操作字符串 这种绑定class 样式 适用于样式的类名 不确定 需要动态指定 . 下面升级一下 changeMood 方法 让他 支持随机切换样式 即 当前 a 的值 可以是 happy 也可以是 sad 还可以是 normal (注意 是其中的一个). 做法 很简单 写一个数组 存放 happy sad normal 然后借助随机数 通过这个随机数 就可以指定 下标 然后通过下标 返回值即可 . 关于 random 不多说 不清楚可以看 JavaScript 随机 (w3school.com.cn) 代码如下 效果 , 可以自己尝试实现以下 ,然后观察 .
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title绑定样式/titlescript src../../js/vue.js/scriptstyle.basic {width: 400px;height: 100px;border: 1px solid black;}/* happy , sad , normal 三选一 */.happy {background-image: linear-gradient(180deg, rgb(247, 132, 132), rgb(241, 241, 80));}.sad {background-color: gray;border: 3px dashed green;}.normal {background-color: skyblue;}.test1 {background-color: rgb(140, 244, 195);}.test2 {font-size: 50px;text-shadow: 2px 2px 5px red;}.test3 {border-radius: 20px;background-color: yellow}/style/headbodydiv idrootdiv classbasic :classa clickchangeMood{{name}}/div/divscriptnew Vue({el: #root,data: {name: 迪迦,a: normal},methods: {changeMood() {let arr [happy, sad, normal]let index Math.floor(Math.random() * 3)this.a arr[index]}}})/script/body/html绑定 class 样式 数组写法 适用场景 要绑定的样式不确定 需要动态指定 绑定class 样式 对象写法 适用于 绑定的样式个数确定 名字也确定但要动态决定用不用 看完 绑定 class 下面 来看看 如何 绑定 内联的 style . 1.2 绑定 style 样式 补充一下 用的少 这里 :style 里面 除了 写 对象也可以写数组 . 总结
绑定样式 : class 样式 a. 写法 class “xxx” , xxx 可以是 字符串 对象 数组 b. 字符串写法 使用与 类名不确定 要动态获取 c. 对象写法适用于 要绑定多个样式 个数不确定 名字也不确定 d. 数组写法适用于 要绑定多个样式 个数确定 名字也确定 当不确定用不用 . style 样式 a. :style{fontSize : xxx} 其中 xxx 是动态值 b. :style [a,b] 其中 a , b 是样式对象 2. 条件渲染 条件渲染 : 顾名思义 符合了某些条件就渲染某些东西 2.1 v-show 2.2 v-if 下面就可以通过 v-show 或 v-if 写一个 小交互 : 下面继续 想一想 既然有 v-if 那么 v-else-if 和 v-else 肯定是少不了的 之前我们如何 使用 if else if , else 那么 v-if v-else-if , v-else 就 如何使用 . 看完了 v-else-if , v-else , 下面来补充一个 标签 template 总结
条件渲染 v-if 写法 1. v-if “表达式” , 2. v-else-if “表达式” , 3. v-else 这里也可以写表达式 适用于 切换频率较低的场景 特点 : 不展示的DOM元素直接被移除 注意 : v-if 可以和 v-else-if v-else 一起使用 但要求结构不能被 “打断” . v-show 写法 : v-show“表达式”, 适用于 : 切换频率较高的场景. 特点 : 不展示的 DOM 元素未被移除 , 仅仅是使用样式隐藏掉 备注 使用 v- if 的时候元素可能无法获取到 (v-if“false” 当前DOM 元素就被移除了)而使用 v-show 一定可以获取到 3. 列表渲染 3.1 v-for 1. 遍历数组 : 看完了遍历数组下面来看看如何使用 v-for 遍历对象 2. 遍历对象 除了 数组 对象 v-for 还能遍历字符串 用的不多 了解即可 3. 遍历字符串 最后来看一个 比 遍历字符串 用的还少的 指定遍历的次数 4. 指定遍历次数 总结
v-for指令 :
用于展示列表数据语法 v-for (item,index) in xxx :key yyy可遍历 : 数组 对象 字符串 (用的很少) , 指定次数 (用的很少) . 3.2 key 的作用与原理 上面说 v-for 中的 key 是让 每个 li 拥有 唯一的 id 这里就来细说一下 key 的作用 和 原理 图一 图二 这里补充一下 如果 写 v-for 遍历 列表的时候 没有写 key vue 会做一个默认的动作 会将遍历时的索引值(下标) 自动作为key 这也是为啥之前没写 key 也出错的原因. 总结
面试题 react vue 中的 key 有什么作用 ? key 的 内部原理 虚拟 DOM 中的key 的作用 : a. key 是 虚拟 DOM 对象的标识 当状态中的数据发生变化时 Vue 会根据 新数据 生成 新的虚拟DOM 随后 Vue 进行 新虚拟 DOM 与 旧 虚拟 DOM 的差异比较 。 比较规则如下 对比规则 : a. 旧虚拟 DOM 中找到了 与 新虚拟 DOM 相同的 key : 若旧 虚拟 DOM 中内容没变 直接使用之前的 真实 DOM 若虚拟 DOM 中内容变了 则生成新的真实 DOM 随后 替换掉页面中之间的真实 DOM 。 b. 旧虚拟 DOM中未找到 与 新虚拟 DOM 相同的key 创建新的 真实 DOM 随后渲染到页面上 用 index 作为 key 可能会引发的问题 : a. 若 对数据进行 : 逆序添加逆序删除等破坏顺序操作 : 会产生没必要的真实 DOM 根性 -- 界面效果没问题 但效率低. b. 如果结构中还包含 输入类的 DOM 会产生 错误 DOM 更新 — 界面有问题 开发中如何选着 key ? a.最好使用每条数据的唯一标识 作为 key 比如 id 手机号 身份证 学号等 唯一值. b.如果不存在对数据的逆序添加 逆序删除等破坏顺序操作 仅 用于渲染列表用于展示使用index作为 key 是没问题的。 3.3 列表过滤 通过 : 实现 一段代码 来学习 列表过滤 效果 : 补充 JavaScript Array filter() 方法 (w3school.com.cn) 图一 图二 用 watch 实现 下面来看看 用computed 如何实现 3.4 列表排序 这里 对 刚刚的列表过滤 升级以下添加一个排序功能 . 实现效果 : 实现 : sort 方法 JavaScript Array sort() 方法 (w3school.com.cn)
