二五(Vue2-01)、创建实例、插值表达式、响应式、Vue指令、
1. Vue 概念及创建实例
<body><!-- 创建Vue实例，初始化渲染1. 准备容器 (Vue所管理的范围)2. 引包 (开发版本包 / 生产版本包) 官网3. 创建实例4. 添加配置项 => 完成渲染
--><div id="app"><h1>{{msg}}</h1><a href="#">{{num}}</a></div><!-- Vue是一个用于构建用户界面的渐进式框架构建用户界面 -- 基于数据动态渲染出用户看到的页面渐进式 -- 循序渐进框架 -- 一套完整的项目解决方案，提升开发效率--><!-- 引入的是开发版本包 - 包含完整的注释和警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 创建Vue实例 new Vue()const app = new Vue({// el 指定挂载点，选择器指定控制的是哪个盒子el: '#app',// data 提供数据data: {msg: 'hello world',num: 100}})</script></body>
2. 插值表达式
<body><!-- 插值表达式：Vue的一种模板语法作用：利用表达式进行插值，将数据渲染页面中语法：{{ 表达式 }}表达式：是可以被求值的代码，JS引擎会将其计算出一个结果注意点：1. 使用的数据要存在2. 支持的是表达式，不是语句 if for3. 不能在标签属性中使用 {{ }}
--><div id="app"><!-- 插值表达式 -- 正确使用 --><h3>{{ msg }}</h3><p>{{ num }}</p><p>{{ `num值为${num}` }}</p><p>{{ num + 1 }}</p><p>{{ num > 10 ? '大于10' : '小于等于10' }}</p><p>{{ obj.name }}</p><p>{{ arr[2] }}</p><!-- 错误使用 --><!-- 1. 数据不存在 --><!-- <p>{{ price }}</p> --><!-- 2. 插入语句 --><!-- <p>{{ if(num>10) {console.log('num大于10')} }}</p> --><!-- 3. 在标签属性中使用 --><!-- <p title="{{ num }}"></p> --></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>new Vue({el: '#app',data: {msg: 'Hello World',num: 20,obj: {name: 'Tom',age: 18},arr: [1, 5, 7, 2, 45, 89]}})</script></body>
3. 响应式特性
<body><!-- 数据的响应式处理 → 响应式：数据变化，视图自动更新聚焦于数据 → 数据驱动视图使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可--><div id="app"><h3>在一个插值表达式中引用多个 data 属性</h3><p>+拼接 {{name + ' ' + age}}</p><p>模板字符串 {{ `${name} ${age}` }}</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {name: 'Tom',age: 18,}})</script></body>
4. Vue 指令
4.1 v-html v-text
<body><!-- Vue 指令指令就是带有 v- 前缀 的特殊 属性，不同属性 对应 不同的功能学习不同指令 → 解决不同业务场景需求动态解析标签：v-html = "表达式 " → 动态设置元素 innerHTML--><!-- v-html 相当于 innerHTML，识别标签 --><!-- v-text 相当于 innerText，不识别标签，把标签当成普通字符串 --><div id="app"><div v-html="str"></div><div v-html="str1">html超链接</div><div v-text="str1">text超链接</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {str: 'Hello',str1: '<a href="#">超链接</a>'}})</script></body>
4.2 v-show v-if
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 100px;line-height: 100px;margin: 10px;border: 3px solid #000;text-align: center;border-radius: 5px;box-shadow: 2px 2px 2px #ccc;}</style>
</head><body><!-- v-show 底层原理：切换 css 的 display: none 来控制显示隐藏场景：频繁切换显示隐藏的场景v-if 底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）场景：要么显示，要么隐藏，不频繁切换的场景--><div id="app"><div class="box" v-show="blF">我是v-show控制的盒子</div><div class="box" v-if="blF">我是v-if控制的盒子</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {blT: true,blF: false}})</script></body></html>
4.3 v-else v-else-if
<body><!-- v-else v-else-if作用：辅助 v-if 进行判断渲染注意：需要紧挨着 v-if 一起使用--><div id="app"><p v-if="gender === 0">性别：♂ 男</p><p v-else>性别：♀ 女</p><hr><p v-if="score >= 90">成绩评定A: 奖励电脑一台</p><p v-else-if="score >= 70">成绩评定B: 奖励周末郊游</p><p v-else-if="score >= 60">成绩评定C: 奖励零食礼包</p><p v-else>成绩评定D: 惩罚一周不能玩手机</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {gender: 0,score: 99}})</script></body>
4.4 v-on
4.4.1 内联语句
4.4.2 无参函数
<!-- v-on1. 作用：注册事件 = 添加监听 + 提供处理逻辑2. 语法：v-on:事件名 = "内联语句"v-on:事件名 = "methods中的函数名"3. 简写：@事件名 = "内联语句"4. 注意：methods函数内的 this 指向 Vue 实例
--><body><div id="app"><!-- 1. 内联语句 --><!-- <button v-on:click="num--" v-show="num>1">-</button><span>{{ num }}</span><button @click="num++">+</button> --><!-- 2. 无参函数 --><!-- 需要传参必须写(), 无参函数()有无不影响界面效果 --><button v-on:click="reduce()" v-show="num>1">-</button><span>{{ num }}</span><button @click="add">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- <script src="lib/vue.js"></script> --><script>const app = new Vue({el: '#app',data: {num: 5},// 封装函数的配置项methods: {add() { this.num++ },reduce() { this.num-- }}})</script>
</body>
4.4.3 案例 - 点击切换隐藏
<body><div id="app"><button @click="fn">切换显示隐藏</button><h1 v-show="flag">黑马程序员</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: true},methods: {fn() { this.flag = !this.flag }}})</script></body>
4.4.4 有参函数 案例 - 小黑自动售货机
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style>
</head><body><div id="app"><div class="box"><h3>小黑自动售货机</h3><!-- v-bind:disabled="balance>0?false:true" --><button @click="fn(5)" v-bind:disabled="flag">可乐5元</button><button @click="fn(10)" v-bind:disabled="flag">咖啡10元</button><button @click="fn(8)" v-bind:disabled="flag">牛奶8元</button></div><p>银行卡余额：{{balance}}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {balance: 100,// data 对象的属性初始化时不能直接引用其他属性,因为它们还没有被定义。// flag: this.balance > 0 ? false : true},// 计算属性computed: {flag() {return this.balance <= 0;}},methods: {fn(price) {// this.balance = this.balance - price// this.balance -= priceif (this.balance >= price) {this.balance -= price;} else {alert('余额不足');}}}})</script>
</body></html>
4.5 v-bind
<body><div id="app"><!-- v-bind:src => 可简写为 :src作用：动态的设置html的标签属性--><img v-bind:alt="msg"><img :src="url"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {msg: '图片',url: 'imgs/10-01.png'}})</script>
</body>
案例图片切换 - 波仔学习之旅
<body><div id="app"><!-- <button @click="reduce">上一页</button> --><button @click="index--" v-show="index>0">上一页</button><div><!-- <img src="imgs/11-00.gif" alt=""> --><img alt="#" :src="imgs[index]"></div><!-- <button @click="add">下一页</button> --><button @click="index++" v-show="index<imgs.length-1">下一页</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {imgs: ['imgs/11-00.gif','imgs/11-01.gif','imgs/11-02.gif','imgs/11-03.gif','imgs/11-04.png','imgs/11-05.png'],index: 0,},/* methods: {add() {this.index++},reduce() {this.index--}} */})</script>
</body>
4.6 v-for
<!-- v-for1. 作用：基于数据循环，多次渲染整个元素 → 数组(重要)、对象、数字...2. 遍历数组语法：v-for = "(item, index) in 数组" ➢ item 每一项， index 下标➢ 省略 index: v-for = "item in 数组"
--><body><div id="app"><!-- <h3>小黑水果店</h3> --><!-- 数组 --><ul><li v-for="(item,index) in list">{{item}} -- {{index}}</li><li v-for="(item) in list">{{item}}</li></ul><!-- 字符串 --><ul><li v-for="(item) in str">{{item}}</li></ul><!-- 对象 --><p v-for="(value,key,index) in obj">{{value}} -- {{key}} -- {{index}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: ['Tom', 'Jerry', 'Rose'],str: 'Hi',obj: {name: 'Taylor',age: 19,}}})</script>
</body>
案例图书管理 - 小黑的书架
<!-- 图书管理案例 - 小黑的书架 --><body><div id="app"><h3 style="margin-left: 30px;">小黑的书架</h3><ul><!-- <li><span>《红楼梦》</span><span>曹雪芹</span><button>删除</button></li> --><li v-for="(item) in booksList"><span>{{item.name}}</span><span>{{item.author}}</span><button @click="del(item.id)">删除</button></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {booksList: [{ id: 1, name: '《红楼梦》', author: '曹雪芹' },{ id: 2, name: '《西游记》', author: '吴承恩' },{ id: 3, name: '《水浒传》', author: '施耐庵' },{ id: 4, name: '《三国演义》', author: '罗贯中' }]},methods: {del(id) {// console.log(id)// 用 filter 根据 id 从数组中删除对应项this.booksList = this.booksList.filter((item) => {return item.id !== id})}}})</script>
</body>
v-for 中的 key
<!-- v-for 中的 key语法：key属性 = "唯一标识"作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。注意点：1. key 的值只能是 字符串 或 数字类型2. key 的值必须具有 唯一性3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）不加 keyv-for 的默认行为会尝试 原地修改元素 （就地复用）
--><body><div id="app"><h3 style="margin-left: 30px;">小黑的书架</h3><ul><!-- <li v-for="(item) in booksList"> --><li v-for="(item) in booksList" :key="item.id"><span>{{item.name}}</span><span>{{item.author}}</span><button @click="del(item.id)">删除</button></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {booksList: [{ id: 1, name: '《红楼梦》', author: '曹雪芹' },{ id: 2, name: '《西游记》', author: '吴承恩' },{ id: 3, name: '《水浒传》', author: '施耐庵' },{ id: 4, name: '《三国演义》', author: '罗贯中' }]},methods: {del(id) {this.booksList = this.booksList.filter((item) => {return item.id !== id})}}})</script>
</body>
4.7 v-model
<body><div id="app"><!-- v-model 可以让数据和视图，形成双向数据绑定(1) 数据变化，视图自动更新(2) 视图变化，数据自动更新可以快速[获取]或[设置]表单元素的内容语法: v-model = '变量'-->账户：<input type="text" v-model="userName"> <br><br>密码：<input type="password" v-model="passWord"> <br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {userName: '',passWord: ''},methods: {login() {console.log(this.userName, this.passWord)},reset() {this.userName = ''this.passWord = ''}}})</script>
</body>
5. 综合案例 - 小黑记事本
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./css/index.css" /><title>记事本</title>
</head><body><!-- 主体区域 --><section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input placeholder="请输入任务" class="new-todo" v-model="todo" /><button class="add" @click="add">添加任务</button></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><!-- 1. 列表渲染 --><li class="todo" v-for="(item,index) in list" :key="item.id"><div class="view"><span class="index">{{index+1}}.</span> <label>{{item.txt}}</label><button class="destroy" @click="del(item.id)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer"><!-- 统计 --><!-- <span class="todo-count">合 计:<strong> 1 </strong></span> --><span class="todo-count">合 计:<strong> {{list.length}} </strong></span><!-- 清空 --><button class="clear-completed" @click="reset" v-show="list.length>0">清空任务</button></footer></section><!-- 底部 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {todo: '',list: [{ id: 1, txt: '敲代码' },{ id: 2, txt: '删代码' },{ id: 3, txt: '改代码' }]},methods: {// 2. 添加功能add() {/* if (this.todo.trim().length > 0) {this.list.unshift({id: +new Date(),txt: this.todo})// console.log(this.list[0].id)this.todo = ''} */if (this.todo.trim() === '') {alert('请输入任务内容')return}this.list.unshift({id: +new Date(),txt: this.todo})this.todo = ''},// 3. 删除功能del(id) {this.list = this.list.filter(item => item.id !== id)},// 4. 清空reset() {this.list = []}}})</script>
</body>
<!-- 功能总结：1. 列表渲染: v-for key 的设置 {{ }} 插值表达式2. 删除功能: v-on 调用传参 filter 过滤 覆盖修改原数组3. 添加功能: v-model 绑定 unshift 修改原数组添加4. 底部统计 和 清空数组.length累计长度覆盖数组清空列表v-show 控制隐藏
--></html>
6. 作业
6.1 哔哩哔哩首页
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bilibili-干杯~~~</title><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入css文件 --><link rel="stylesheet" href="./css/index.css"><!-- 引入字体图标文件 --><link rel="stylesheet" href="./fonts/iconfont.css">
</head><body><div id="app"><!-- 头部模块 --><header class="suspension"><div class="m-navbar"><!-- logo --><a href="#" class="logo"><i class="iconfont Navbar_logo"></i></a><!-- 右侧 --><div class="right"><a href="#" class="search"><i class="iconfont ic_search_tab"></i></a><a href="#" class="face"><img src="./images/login.png" alt=""></a><div class="app-btn"><img src="./images/download.png" alt=""></div></div></div><div class="channel-menu"><div class="tabs"><!-- 很宽的盒子 --><div class="tabs-list"><a href="#">首页</a><a href="#">动画</a><a href="#">番剧</a><a href="#">果蔬</a><a href="#">音乐</a><a href="#">舞蹈</a><a href="#">鬼畜</a><a href="#">吹鬼</a><!-- 红色线 --><div class="line"></div></div></div><!-- 下拉箭头 --><div class="after"><i class="iconfont general_pulldown_s" @click="isShow"></i></div></div></header><!-- 频道下拉模块 --><div class="tabs-dropdown" v-show="flag"><div class="tabs-wrap"><span v-for="(item) in channelList">{{item}}</span><!-- <span>动画</span><span>番剧</span><span>国创</span><span>音乐</span><span>舞蹈</span><span>游戏</span><span>科技</span><span>运动</span><span>汽车</span><span>生活</span><span>美食</span><span>动物圈</span> --><!-- ''''''' --></div><div class="close-wrap"><span @click="isShow">收起︿</span></div></div><!-- 主体部分 --><div class="m-home"><div class="video-list"><!-- 视频卡片模板 --><a href="#" class="video-item" v-for="(item) in videoList"><div class="card"><img :src=item.img><!-- 播放量 --><div class="count"><span><i class="iconfont icon_shipin_bofangshu"></i>{{item.views}}<!-- item.views --></span><span><i class="iconfont icon_shipin_danmushu"></i>{{item.commonet}}</span></div></div><p class="title ellipsis-2"><!-- 黑马程序员前端React入门到实战视频教程，从react18+hooks核心基础到企业级项目开发实战（B站评论、极客园项目等）及大厂面试全通关 -->{{item.title}}</p></a></div></div><!-- 底部模块 --><footer class="app"><div class="btn-app"><i class="iconfont Navbar_logo"></i>打开App，看你感兴趣的视频</div></footer></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- <script src="./js/index.js"></script> --><script>// TODO：阅读代码，根据提供的数据，实现目标效果// DATA字段说明/*** channelList 频道列表* videoList 视频列表* title 视频标题* views 播放量* commonet 评论量* img 封面图片*//* 具体需求如下：频道列表展开收起：点击下拉箭头，显示频道列表，点击收起，隐藏频道列表频道渲染：根据提供数据，循环渲染出每个频道播放列表渲染：根据提供数据，循环渲染出每个视频的信息*/const app = new Vue({el: "#app",data: {channelList: ["首页","动画","番剧","国创","音乐","舞蹈","游戏","科技","运动","汽车","生活","美食","知识","动物圈","鬼畜","时尚娱乐影视","纪录片","电影","电视剧","直播","相簿","课堂",],videoList: [{title:"黑马程序员前端React入门到实战视频教程，从react18+hooks核心基础到企业级项目开发实战（B站评论、极客园项目等）及大厂面试全通关",views: "110.6W",commonet: "2.3万",img: "https://i0.hdslb.com/bfs/archive/4ba435e67fa208ce7a5343c0fc2cd454d8cc50fc.jpg@480w_270h_1c",},{title:"黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程",views: "238.4W",commonet: "8.9万",img: "https://i1.hdslb.com/bfs/archive/7cbcf700e3950f40dab97b5e57c8581733fdad22.jpg@480w_270h_1c",},{title:"Java八股文面试题视频教程，Java面试八股文宝典（含阿里、腾迅大厂java面试真题，java数据结构，java并发，jvm等最新java面试真题）",views: "87.5W",commonet: "1.4万",img: "https://i1.hdslb.com/bfs/archive/3c0dbdf9863a9e21d8ea5c50892b01db1268a268.jpg@480w_270h_1c",},{title:"黑马程序员2023新版JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）",views: "231.6W",commonet: "8.2万",img: "https://i1.hdslb.com/bfs/archive/81c2b09fea6a978a169eeb3fde028066751e06e5.jpg@480w_270h_1c",},{title:"黑马程序员Node.js全套入门教程，nodejs新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解",views: "209.6W",commonet: "5.5万",img: "https://i2.hdslb.com/bfs/archive/a35e28d321c55c783526b2382431409935ddfb9f.jpg@480w_270h_1c",},{title:"2023新版数据结构与算法Java视频教程（上篇），java高级程序员必学的数据结构与算法",views: "54.6W",commonet: "1万",img: "https://i1.hdslb.com/bfs/archive/8dae32b310561144385867468a39b3f7cab1ba24.jpg@480w_270h_1c",},{title: "黑马程序员人工智能教程_10小时学会图像处理OpenCV入门教程",views: "71W",commonet: "1.8万",img: "https://i0.hdslb.com/bfs/archive/c6f5409bb52de12370b0cd73d98d0f1dd2019f9e.jpg@480w_270h_1c",},{title:"黑马程序员全套Python教程_Python基础入门视频教程，零基础小白自学Python入门教程",views: "157W",commonet: "4.8万",img: "https://i0.hdslb.com/bfs/archive/213b14bfbdbf54248a3f5fa742cb9f9c8f684274.png@480w_270h_1c",},],flag: true,},methods: {isShow() {this.flag = !this.flag;},},});</script>
</body></html>
6.2 Boss 直聘技能选择 - 二次开发
<!DOCTYPE html>
<html><head><title>Boss直聘技能选择</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/index.css">
</head><body><div id="app"><h2><span class="logo-head"></span></h2><div class="skill-tip"><h3>拥有技能</h3><p>请选择技能标签，被选中的标签将突出展示给BOSS</p></div><div class="skill-wrap"><div class="title">自定义标签</div><div class="add-wrap"><input type="text" class="tip" placeholder="请输入关键词" v-model="newSkill" /><button class="add-btn" @click="add">添加</button></div></div><ul class="skill-wrap select"><div class="title">已选</div><!-- <li>html5 <span>x</span></li> --><li v-for="(item) in sT()" @click="item.select = !item.select">{{item.skillName}} <span>x</span></li></ul><ul class="skill-wrap"><div class="title">可选</div><!-- <li>css3</li> --><li v-for="(item) in sF()" @click="item.select = !item.select">{{item.skillName}}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- <script src="./js/index.js"></script> --><script>// TODO：阅读代码，根据提供的数据，实现目标效果// DATA字段说明/*** skillList 技能列表* skillName 技能名称* select 已选择*//* 具体需求如下：渲染数据：将提供的数据绑定到页面对应的位置已选标签：数据中select字段为true的数据对应显示已选列表中，点击标签时更改为可选可选标签：数据中select字段为false的数据对应显示可选列表中，点击标签时更改为已选添加自定义标签：输入框内容为空时，点击添加，不处理当输入框内容不为空时，点击添加，在已选列表中新增标签新增标签后，清空输入框内容新增的自定义标签可以点击切换可选和已选的状态*/const app = new Vue({el: '#app',data: {skillList: [{skillName: "html5",select: true,},{skillName: "css3",select: true,},{skillName: "javascript",select: true,},{skillName: "webapi",select: true,},{skillName: "ajax",select: true,},{skillName: "git",select: true,},{skillName: "echarts",select: true,},{skillName: "node",select: true,},{skillName: "vue",select: true,},{skillName: "微信小程序",select: false,},{skillName: "uni-app",select: false,},{skillName: "react",select: false,},],newSkill: "",},methods: {sT() {return this.skillList.filter((item) => item.select === true);},sF() {return this.skillList.filter((item) => item.select === false);},add() {if (this.newSkill.trim() === "") {alert("请输入有效标签");return;}this.skillList.push({skillName: this.newSkill,select: true,});this.newSkill = "";},},});</script>
</body></html>
6.3 12306 订单详情 - 变形题
<!DOCTYPE html>
<html><head><title>12306订单详情</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/index.css">
</head><body><div id="app" :style="showStyle"><h1>订单详情</h1><div class="container"><!-- 车次信息 --><div class="ticket-info"><div class="start"><div class="time">{{orderInfo.startTime}}</div><div class="origin">{{orderInfo.origin}}<span>></span></div></div><div class="train-info"><div class="train-number">{{orderInfo.trainNumber}}<span>></span></div><div class="station-type">{{orderInfo.stationType === 1?'始发站':'经停站'}}</div><div class="train-duration">历时{{orderInfo.duration}}</div></div><div class="end"><div class="time">{{orderInfo.endTime}}</div><div class="destination">{{orderInfo.destination}}<span>></span></div></div></div><!-- 发车时间 --><div class="train-date"><span class="start-date">发车时间：{{orderInfo.trainDate}}</span><span class="expiration-date">车票当日当次有效</span></div><!-- 改签退票 --><div class="btn-wrap"><button :disabled="!orderInfo.rebook" @click="reOrCan('改签')">改签</button><span>|</span><button :disabled="!orderInfo.cancellation" @click="reOrCan('退票')">退票</button></div><!-- 乘车人列表 --><div class="passenger-list"><!-- <div class="passenger-info"><h3 class="passenger"><div class="passenger-name">张三 <span class="passenger-type">成人票</span></div><div class="seat-info"><span class="seat-type">过道</span>二等座 04车 11B号</div></h3><div class="seat-price"><div class="passenger-passport">中国居民身份证</div><div class="price">￥263</div></div><div class="status"><div class="ticket-status">已出站</div><div class="illustrate">退改说明</div></div></div> --><div class="passenger-info" v-for="(passenger) in orderInfo.passengers"><h3 class="passenger"><div class="passenger-name">{{passenger.pname}} <span class="passenger-type">{{passenger.isAdult ? '成人票':'儿童票'}}</span></div><div class="seat-info"><spanclass="seat-type">{{seatType(passenger.seatType)}}</span>{{passenger.seat}}</div></h3><div class="seat-price"><div class="passenger-passport">中国居民身份证</div><div class="price">￥{{passenger.price}}</div></div><div class="status"><div class="ticket-status">已出站</div><div class="illustrate">退改说明</div></div></div></div></div><div class="tip">🔔 订单信息查询有效期限为30日</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- <script src="./js/index.js"></script> --><script>// TODO:阅读代码，根据提供的订单信息数据，通过学习的Vue指令将页面渲染成目标效果// DATA:数据字段说明/*** startTime： 发车时间* endTime： 到站时间* origin： 发车站* destination：目的地* trainNumber：车次* trainDate：发车日期* stationType：车站类型(1为始发站,2为经停站)* duration：历时* rebook：能否改签* cancellation:能否退票* passengers:乘车人列表* pid：乘车人ID* pname：乘车人姓名* isAdult：是否成年* seat：座位* price：票价* seatType:作为类型(1是靠窗，2是中间，3是过道)*/const app = new Vue({el: "#app",data: {// 防止渲染闪烁showStyle: "display:block;",orderInfo: {startTime: "14:11",endTime: "17:40",origin: "西安北",destination: "成都东",trainNumber: "D1937",trainDate: "2023.09.30 星期六",stationType: 2,duration: "3时29分",// rebook：能否改签 能改签t 按钮不禁用frebook: false,cancellation: true,passengers: [{pid: "0001",pname: "王大锤",isAdult: true,seat: "二等座 04车 11A号",price: 263,seatType: 1,},{pid: "0002",pname: "李二狗",isAdult: false,seat: "二等座 04车 11B号",price: 263,seatType: 2,},{pid: "0003",pname: "张三疯",isAdult: true,seat: "二等座 04车 11C号",price: 263,seatType: 3,},],},},methods: {seatType(num) {switch (num) {case 1:return "靠窗";/* case 2:return "中间"; */case 3:return "过道";}},reOrCan(msg) {// console.log(11);if (msg === "改签" && this.orderInfo.rebook === true) {alert(`${msg}成功`);} else if (msg === "退票" && this.orderInfo.cancellation === true) {alert(`${msg}成功`);}},},});</script>
</body></html>
相关文章：
、创建实例、插值表达式、响应式、Vue指令、)
二五(Vue2-01)、创建实例、插值表达式、响应式、Vue指令、
1. Vue 概念及创建实例 <body><!-- 创建Vue实例，初始化渲染1. 准备容器 (Vue所管理的范围)2. 引包 (开发版本包 / 生产版本包) 官网3. 创建实例4. 添加配置项 > 完成渲染 --><div id"app"><h1>{{msg}}</h1><a href&…...
P8772 求和 P8716 回文日期
文章目录 [蓝桥杯 2022 省 A] 求和[蓝桥杯 2020 省 AB2] 回文日期 [蓝桥杯 2022 省 A] 求和 题目描述 给定 n n n 个整数 a 1 , a 2 , ⋯ , a n a_{1}, a_{2}, \cdots, a_{n} a1,a2,⋯,an, 求它们两两相乘再相加的和，即 S a 1 ⋅ a 2 a 1 ⋅ a 3 ⋯ a…...
2024.1.1Burp Suite专业版激活（保姆级教程）)
Burp Suite(2)2024.1.1Burp Suite专业版激活（保姆级教程）
声明： 本文所使用的专业版BP在我的博客资源里面，需要的师傅可以自行下载。 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内…...
基于注意力的几何感知的深度学习对接模型 GAABind - 评测
GAABind 作者是苏州大学的生物基础与医学院， 期刊是 Briefings in Bioinformatics, 2024， 25(1)， 1–14。GAABind 是一个基于注意力的几何感知蛋白-小分子结合模式与亲和力预测模型，可以捕捉小分子和蛋白的几何、拓扑结构特征以及相互作用。使用 PDBBind2020 和 CASF2016 作…...
Python中的优化函数2：cvxpy包
文章目录 介绍使用步骤示例1示例2官方文档 介绍 它是一个基于 Python 的凸优化建模工具，专门用于定义和求解 凸优化问题（Convex Optimization Problems）。CVXPY 提供了一种直观的方式来表达优化问题，并通过高效的求解器来解决这些…...
【Linux】结构化命令
结构化命令structured command：允许脚本根据条件跳过部分命令，改变执行流程。 1、if-then语句 格式1： if command then commands fi 格式2： if command; then commands fi 运行if之后的command命令，如果它的退出状态码…...
3-机器人视觉-机器人抓取与操作
文章目录 3机器人视觉目录 1. 传感器和标定摄像头模型Intrinsic MatrixExtrinsic Matrix 标定内参标定手眼标定和外参标定 力传感器&其它传感器其它传感器 2. 神经网络和图像处理2D特征处理常见架构 训练流程推理流程部署流程2D 图像任务3D Point Cloud FeaturePointNet Ap…...
LINUX——shell编程
Shell 简介 Shell 是一个 C 语言编写的脚本语言，它是用户与 Linux 的桥梁，用户输入命令交给 Shell 处理， Shell 将相应的操作传递给内核（Kernel），内核把处理的结果输出给用户。 下面是流程示意图ÿ…...
12.11函数 结构体 多文件编译
1.脑图 定义一个数组，用来存放从终端输入的5个学生的信息【学生的信息包含学生的姓名、年纪、性别、成绩】 1>封装函数 录入5个学生信息 2>封装函数 显示学生信息 3>封装函数 删除第几个学生信息，删除后调用显示学生信息函数 显示 4> 封…...
【go语言】reflect包与类型推断
reflect 包的核心概念 Go 中的反射涉及两个核心概念： Type：表示一个类型的结构体，reflect.Type 是类型的描述。Value：表示一个值的结构体，reflect.Value 是一个具体值的包装。 反射让我们能够动态地访问对象的类型和…...
docker启动一个helloworld（公司内网服务器）
这里写目录标题 容易遇到的问题：1、docker连接问题 我来介绍几种启动 Docker Hello World 的方法： 最简单的方式： docker run hello-world这会自动下载并运行官方的 hello-world 镜像。 使用 Nginx 作为 Hello World： docker…...
【瑞萨RA0E1开发板评测报告】IIC OLED 测试
【瑞萨RA0E1开发板评测报告】IIC OLED 测试 基于前面关于瑞萨 e studio 开发软件的使用，以及工程测试基础，本文进一步探索实现硬件 IIC OLED 的文字和图片显示。 1 背景 简单介绍 IIC 通信协议、OLED 显示原理、SS1306 驱动 IC 等。 IIC 通信协议 I…...
全球叉车市场 2023 - 2032 年发展趋势：自动化、电商与电动叉车的崛起
全球叉车市场到2032年将达到955.1亿美元，年复合增长率为7.49% | Astute Analytica 全球叉车市场正迎来显著增长，市场估值预计将从2023年的498.6亿美元增长至2032年的955.1亿美元，预测期内年复合增长率（CAGR）为7.49%。这…...
Kafka系列教程 - Kafka 生产者 -2
1. 生产者简介 不管是把 Kafka 作为消息队列系统、还是数据存储平台，总是需要一个可以向 Kafka 写入数据的生产者和一个可以从 Kafka 读取数据的消费者，或者是一个兼具两种角色的应用程序。 使用 Kafka 的场景很多，诉求也各有不同ÿ…...
【专题】2024年中国新能源汽车用车研究报告汇总PDF洞察（附原数据表）
原文链接： https://tecdat.cn/?p38564 本年度，国家及地方政府持续发力，推出诸多政策组合拳，全力推动汽车产业向更高质量转型升级，积极鼓励消费升级，并大力推行以旧换新等惠民生、促发展举措。尤为引人注目…...
将带注释的Word文档改造成点击注释引用即可弹窗显示注释的HTML文档
阅读中国古籍电子书的时候，往往有很多注释。在正文和注释之间来回滚动页面是一件挺麻烦的事，比较方便的做法是将它编辑成通过点击注释引用即将注释弹出显示在引用所在位置的HTML文档，然后利用HTML文档制作成PDF或者epub文件，就比较…...
【Android开发】安装Android Studio（2023.1.1）
下载安装包 Android Studio2023.1.1百度云盘下载，提取码：6666https://pan.baidu.com/s/1vNJezi7aDOP0poPADcBZZg?pwd6666 安装Android Studio 2023.1.1 双击下载好的安装包 弹出界面点击下一步 继续点击【Next】 更改安装路径后继续点击【Next】 点…...
SQLite Truncate Table
SQLite Truncate Table SQLite 是一种轻量级的数据库管理系统，广泛用于各种应用程序中。在数据库管理中，有时候需要快速删除表中的所有数据，这时就可以使用 TRUNCATE TABLE 命令。然而，SQLite 与其他数据库管理系统（如…...
建立合作伙伴关系,推动艺术科技教育与研究...)
港科夜闻 | 香港科大与荷兰代尔夫特理工大学(TU Delft)建立合作伙伴关系,推动艺术科技教育与研究...
关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大与荷兰代尔夫特理工大学(TU Delft)建立合作伙伴关系，推动艺术科技教育与研究。2024年12月6日，合作伙伴计划正式启动，双方期望透过合作加强艺术科技知识交流，借此推…...
谈一谈大数据流式处理，以Spark Streaming为例详细论述
Spark Streaming是构建在Spark上的实时流计算框架，可以进行实时流数据处理。Spark是一个类似于MapReduce的分布式计算框架，其核心是弹性分布式数据集，可以在快速在内存中对数据集进行多次迭代，以支持复杂的数据挖掘算法和图形计算…...
)
RabbitMQ实现消息发送接收——实战篇(路由模式)
本篇博文将带领大家一起学习rabbitMQ如何进行消息发送接收，我也是在写项目的时候边学边写，有不足的地方希望在评论区留下你的建议，我们一起讨论学习呀~ 需求背景 先说一下我的项目需求背景，社区之间可以进行物资借用，…...
Docker Desktop占用空间问题解决
Windows安装Docker Desktop，没过多久就会发现C盘空间满了，很大可能是Docker Desktop的文件占用了空间，可以通过以下步骤解决： 步骤一：执行清理命令 docker system prune清理磁盘，删除关闭的容器、无用的数…...
系统性能优化
一、概述 性能优化的目标：是提高系统或应用程序的响应时间、吞吐量、cpu、内存、磁盘IO、网络、流量、JVM、Tomcat、DB等方面的性能指标。 性能优化需要有一些技巧：对于整个产品或项目而言，比如可以从前端优化、后端优化、架构优化、高并发…...
golang操作sqlite3加速本地结构化数据查询
目录 摘要Sqlite3SQLite 命令SQLite 语法SQLite 数据类型列亲和类型——优先选择机制 SQLite 创建数据库SQLite 附加数据库SQLite 分离数据库 SQLite 创建表SQLite 删除表 SQLite Insert 语句SQLite Select 语句SQLite 运算符SQLite 算术运算符SQLite 比较运算符SQLite 逻辑运算…...
)
【NebulaGraph】mac通过Docker安装以及官方查询示例、以及索引详解还有数据构建案例(五)
【NebulaGraph】mac通过Docker安装以及官方查询示例 1. Docker安装NebulaGraph2. 官方查询示例3. Nebula Graph 的 Java 数据解析实践与指导4. 从零到一：如何构建一个企业股权图谱系统？5. Nebula Graph 索引详解6. nGQL 执行计划详解与调优7. 图数据库的…...
【一本通】家庭作业（贪心算法）
【一本通】家庭作业 C语言代码 💐The Begin💐点点关注，收藏不迷路💐 老师在开学第一天就把所有作业都布置了，每个作业如果在规定的时间内交上来的话才有学分。每个作业的截止日期和学分可能是不同的。例如如果一个作业…...
Kylin麒麟操作系统 | 网络链路聚合配置（team和bond）
目录 一、理论储备1. 链路聚合 二、任务实施1. team模式2. bond模式 一、理论储备 1. 链路聚合 链路聚合是指将多个物理端口捆绑在一起，形成一个逻辑端口，以实现出/入流量在各成员端口中的负载分担。链路聚合在增加链路带宽、实现链路传输弹性和冗余等…...
2024年软件测试面试题大全【含答案】
一、面试基础题 简述测试流程: 1、阅读相关技术文档（如产品PRD、UI设计、产品流程图等）。 2、参加需求评审会议。 3、根据最终确定的需求文档编写测试计划。 4、编写测试用例（等价类划分法、边界值分析法等）。 5、用例评审(…...
Stable Diffusion 提示词语法
1.提示词基础 1.提示词之间用英文逗号,分隔 2.提示词之间是可以换行的 3.权重默认为1,越靠前权重越高 4.数量控制在75个单位以内 2.提示词各种符号的意义 2.1 ()、[]、{}符号 权重值()小括号[]中括号{}大括号默认1111层()1.1[]0.9{}1.052层(()) 1.121.21[[]]0.920.81{{}}1.…...
)
Y20030004基于asp.net+Sql的环保网站的设计与实现(附源码 调试 文档)
环保网站的设计与实现 1.摘要要2. 系统功能3.功能结构图4.界面展示5.源码获取 1.摘要要 近几年国家对于环境管理是高度重视，尤其是对于环境生态的破坏与环境污染，已经严重影响到人类的生存和发展。为了使生态环境能够得到保护和改善，持续发展…...
OpenCV的简单练习
1、读取一张彩色图像并将其转换为灰度图。 import matplotlib.pyplot as pltimg plt.imread("./flower.png") # 灰度化 img_gray img[:,:,0]*0.299 img[:,:,1]*0.587 img[:,:,2]*0.114plt.subplot(121) plt.imshow(img) plt.subplot(122) plt.imshow(img_gray,c…...
VS2019中无法跳转定义_其中之一情况
我习惯了使用VS2019看stm的代码； 遇到的问题，在导入代码后，发现有些函数调用不能跳转到定义； 问题描述步骤 1、导入代码 2、跳转，无法跳转 1、中文路径 2、删除.vs文件 和网上查的都没办法解决 最后发现是VS不支持 …...
虚幻5描边轮廓材质
很多游戏内都有这种描边效果，挺实用也挺好看的，简单复刻一下 效果演示： Linethickness可以控制轮廓线条的粗细 这样连完，然后放到网格体细节的覆层材质上即可 可以自己更改粗细大小和颜色...
【C语言】多线程服务器
多线程服务器 多线程服务器步骤代码 多线程服务器 步骤 主线程创建子线程，用子线程和客户端通信。 步骤： 1.使用socket函数，获取一个socket文件描述符 2.使用setsockopt端口复用 3.使用bind函数允许客户端的哪些ip可以访问服务器 4.使用lis…...
跨平台轻量级RTSP技术设计和使用场景探讨
设计背景 跨平台内网超低延迟直播的创新引擎 为满足安防视频监控、教育培训、工业生产、医疗健康、智能物联网等内网超低延迟需求，避免让用户配置单独的服务器，大牛直播SDK在推送端发布了跨平台（Windows|Linux（含x86_64|aarch64…...
分解质因数
题目描述 给定 n个正整数a，将每个数分解质因数，并按照质因数从小到大的顺序输出每个质因数的底数和指数。 输入格式 第一行包含整数 n。 接下来 n行，每行包含一个正整数 a。 输出格式 对于每个正整数 aiai，按照从小到大的顺…...
wordpress建站--如何用Let‘s Encrypt给网站添加免费ssl证书，支持https访问
本文首发网站：https://www.click234.com 默认情况下我们的网站是http访问，为了增加访问安全性，我们需要添加ssl证书，支持采用https方式访问，今天我们来看下怎么创建免费的ssl证书--Lets Encrypt 使用 Certbot 自动化工…...
web实操7——ServletContext
概念 和服务器通信 功能 解释说明： mime：互联网中一种文件的类型，可以用servletContext对象来获取。 域对象：用来共享数据，里面有一些get,set,removeAttribute,只要搞清楚ServletContext对象的域的范围是什么 如何…...
Android中bindService和startService启动服务有何区别
Android中bindService和startService启动服务有何区别 bindService 和 startService 是 Android 中两种用于与 Service 交互的方式，它们的区别主要在于 生命周期管理 和 使用场景。以下是详细对比： 1. bindService方式 bindService 是一种绑定方式&am…...
Jupyter Notebook 切换虚拟环境
方法 切换到需要添加到Jupyter Notebook中的虚拟环境，执行： python -m ipykernel install --name Jupyter Notebook中显示的虚拟环境名称如果遇到 [Errno 13] Permission denied: /usr/local/share/jupyter类似的权限问题，可能是没有对应的…...
短波红外相机
短波红外相机搭载采用 SenSWIR 技术的 Sony 高灵敏度传感器，能捕获到400nm~1700nm范围的可见光-短波红外宽波段图像信息，该相机可替代传统的“可见光相机短波红外相机”双相机检测方案，降低系统成本、提高处理速度、扩大检测范围，…...
余弦相似度Cosine Sim
what 余弦相似度是一种用于度量向量相似性的metric。 c o s θ A . B ∣ A ∣ . ∣ B ∣ cos\theta \frac{A.B}{|A|.|B|} cosθ∣A∣.∣B∣A.B A.B：向量的内积|A|：向量的模长 c o s θ cos\theta cosθ：的范围$ [ -1 , 1 ] $ why 余弦…...
【从零开始的LeetCode-算法】1338. 数组大小减半
给你一个整数数组 arr。你可以从中选出一个整数集合，并删除这些整数在数组中的每次出现。 返回 至少 能删除数组中的一半整数的整数集合的最小大小。 示例 1： 输入：arr [3,3,3,3,5,5,5,2,2,7] 输出：2 解释：选择 {3,7…...
测试工程师八股文05|功能测试、业务测试
一、基础概念 1、软件测试分类 1️⃣按照软件产生的阶段划分 单元测试：针对程序源代码进行测试【开发自测】集成测试：针对模块之间功能交互进行测试系统测试：对整个系统（功能、非功能）进行全面测试验收测试ÿ…...
【电源专题】开关转换器使能（EN）和欠压锁定（UVLO）为什么需要回滞？
在文章：【电源专题】案例：芯片规格书使能定义高电平最小阈值1.4V，那真的是到1.4V时才开始输出？_芯片的电流阀值-CSDN博客中我们提到一般来说开关转换器的使能脚是有一个回滞的，比如下图所示的芯片规格书...
TS的类型守卫、类型约束实践
类型守卫 // 基础类型判断 const arr [30, 50] console.log(typeof arr) // object const set new Set(arr) console.log(typeof set) // object const map new Map() console.log(typeof map) // objectclass Customer {constructor() {}buy(method:string) {console.log(…...
Thread线程基础使用
多线程目的：其实就是希望“并行”执行多任务，提升效率。 单核多线程基于时间片轮询 并发而非并行 线程最大数等于cpu核心数为佳 namespace thinger.ThreadDemo {class Program{//主线程static void Main(string[] args){Console.WriteLine("这个…...
番外篇 | BGF-YOLO：引入双层路由注意力、广义特征金字塔网络和第四检测头，提高YOLOv8检测性能
前言：Hello大家好，我是小哥谈。本文提出了一种名为BGF-YOLO的新模型，通过引入双层路由注意力、广义特征金字塔网络和第四检测头，提高YOLOv8在脑肿瘤检测中的性能，采用多层特征融合与动态稀疏注意机制以减少特征冗余。 🌈 目录 🚀1.基础概念 🚀2.网络结构 �…...
15-从 TypeScript 到 ArkTS 的适配规则（5）
15-从 TypeScript 到 ArkTS 的适配规则（5） 不支持确定赋值断言 **规则：**arkts-no-definite-assignment 级别：警告 ArkTS不支持确定赋值断言，例如：let v!: T。改为在声明变量的同时为变量赋值。 TypeS…...
UniApp配置使用原子化tailwindcss
参考视频 创建项目 新建项目选择uniapp - vue版本这里我选择3 - 点击创建即可 创建完成后，如果是要编译到小程序的项目则可以先将项目运行到小程序打开了 初始化package.json 执行 npm init -y安装和配置 安装 npm i -D tailwindcss postcss autoprefixer # 安…...