当前位置： 首页 > news >正文

【Vue3】2-13 : 章节总结

news 2026/3/27 10:57:57

本书目录：点击进入

一、总结内容

二、习题

2.1 【选择题】以下Vue指令中，哪些指令具备简写方式？

2.2 【编程题】以下Vue指令中，哪些指令具备简写方式？

＞  效果

＞  代码

一、总结内容

  • 了解核心思想，例如：MVVM设计模式、选项式API优势

  • 了解Vue3各个选项的用法，例如：data、methods、computed等

  • 掌握常见的指令：v-bind、v-on、v-if、v-for等

  • 掌握样式操作、表单操作等行为

  • 了解Vue3的生命周期钩子函数，及如何使用

二、习题

2.1 【选择题】以下Vue指令中，哪些指令具备简写方式？

        A：v-if
        B：v-bind
        C：v-model  
        D：v-on

参考答案：  BD  ( v-bind简写为  :    v-on简写为 @ )

2.2 【编程题】要求如下：

        1. 输入框中内容根据顿号进行分割
        2. 复选项选中添加水果名称到输入框中
        3. 复选框取消选中从输入框中删除水果名称
        4. 输入框可直接输入内容来联动复选框

＞  效果

＞  代码

<body>
<div id="app"><input type="text" v-model="fruitsInput"><br><input type="checkbox" v-model="fruits" value="西瓜">西瓜<br><input type="checkbox" v-model="fruits" value="苹果">苹果<br><input type="checkbox" v-model="fruits" value="哈密瓜">哈密瓜<br><input type="checkbox" v-model="fruits" value="芒果">芒果<br>
</div>
<script>let vm = Vue.createApp({data() {return {fruits: ['苹果', '芒果']}},computed: {fruitsInput: {set(val){this.fruits = val.split('、');},get(){return this.fruits.join('、');}}}}).mount("#app")
</script>
</body>

相关文章：

【Vue3】2-13 : 章节总结

本书目录&#xff1a;点击进入 一、总结内容 二、习题 2.1 【选择题】以下Vue指令中&#xff0c;哪些指令具备简写方式&#xff1f; 2.2 【编程题】以下Vue指令中&#xff0c;哪些指令具备简写方式&#xff1f; &#xff1e; 效果 &#xff1e; 代码 一、总结内容 了解核…...

编程日记 2024/1/18 16:51:20

前端学习路径

菜鸟感觉很多人不太知道菜鸟写的博客是一个可以跟着学习、一起深入理解的过程&#xff0c;其中包括了菜鸟从刚开始学习到后面重新学习&#xff0c;再到后面进入学框架等一系列学习过程、知识和感悟&#xff0c;所以菜鸟把自己的博客整理成一个目录提取出来&#xff0c;好让读者…...

编程日记 2024/1/18 16:50:19

算法--插值法

插值法是一种数学方法&#xff0c;主要用于通过已知的离散数据来估算未知值。常见的插值法有线性插值、最近邻插值、双线性插值和双三次插值。以下是其基本原理和应用&#xff1a; 线性插值&#xff1a;假设在两个已知数据点之间&#xff0c;数据的变化是线性的&#xff0c;因…...

编程日记 2024/1/18 16:46:14

uniapp写微信小程序实现电子签名

写电子签名一定要注意的是一切全部按照手机上的适配来&#xff0c;为啥这么说呢&#xff0c;因为你在微信开发者工具中调试的时候认为是好的&#xff0c;正常的非常nice,当你发布版本的时候你会发现问题出来了。我下边的写法你可以直接用很简单。就是要记住canvas的几个属性和用…...

编程日记 2024/1/18 16:44:12

使用 Categraf 采集 Nginx 指标

1. 前言 工作中需要监控 Nginx 的指标&#xff0c;选用的指标采集器是 Categraf&#xff0c;特此记录下&#xff0c;以备后用。 此文档并未详细记录详细的操作细节&#xff0c;只记录了大概的操作步骤&#xff0c;仅供参考。 2. 采集基础指标 2.1. 暴露 Nginx 自带的指标采…...

编程日记 2024/1/18 16:43:11

【Internet Protocol】ip介绍，如何组局域网实现远程桌面和文件共享

文章目录 1.何为“上网”1.1 定义1.2 为什么连了WiFi就能上网了&#xff1f; 2.ip2.1 什么是ip2.2 为什么区分广域网和局域网&#xff0c;ip的唯一性2.3 如何查看设备的ip2.4 什么叫"ping"2.5 区分是否两个ip是否在同一局域网2.5.1 最稳妥的方式&#xff1a;ip&m…...

编程日记 2024/1/18 16:41:07

Java 使用 EasyExcel 爬取数据

一、爬取数据的基本思路 分析要爬取数据的来源 1. 查找数据来源&#xff1a;浏览器按 F12 或右键单击“检查”打开开发者工具查看数据获取时的请求地址 2. 查看接口信息&#xff1a;复制请求地址直接到浏览器地址栏输入看能不能取到数据 3. 推荐安装插件&#xff1a;FeHelper&a…...

编程日记 2024/1/18 16:39:04

React 原理

函数式编程 纯函数 reducer 必须是一个纯函数&#xff0c;即没有副作用的函数&#xff0c;不修改输入值&#xff0c;相同的输入一定会有相同的输出不可变值 state 必须是不可变值&#xff0c;否则在 shouldComponentUpdate 中无法拿到更新前的值&#xff0c;无法做性能优化操作…...

编程日记 2024/1/18 16:37:01

java高并发系列 - 第4天:JMM相关的一些概念

JMM(java内存模型)&#xff0c;由于并发程序要比串行程序复杂很多&#xff0c;其中一个重要原因是并发程序中数据访问一致性和安全性将会受到严重挑战。如何保证一个线程可以看到正确的数据呢&#xff1f;这个问题看起来很白痴。对于串行程序来说&#xff0c;根本就是小菜一碟&…...

编程日记 2024/1/18 16:34:58

如何卸载旧版docker

环境&#xff1a; Docker1.13 centos7.6 问题描述&#xff1a; 如何卸载旧版docker 解决方案&#xff1a; 1.停止Docker服务。使用以下命令停止Docker服务&#xff1a; sudo service docker stop2.卸载Docker软件包。根据您的Linux发行版&#xff0c;使用适当的包管理器来…...

编程日记 2024/1/18 16:33:57

Wheeltec小车的开发实录（0）

配置静态ip&#xff08;可以联网&#xff09; 首先在你正常链接网络的时候打开“Connection Information”(我的是wifi&#xff0c;而且是手机热点&#xff0c;所以我手机就相当于一台路由器) 查看路由ip 观察到Default Route 是192.168.***.225这就是我手机的地址&#xff0…...

编程日记 2024/1/18 16:32:55

uniapp中uview组件库的NoticeBar 滚动通知 使用方法

目录 #平台差异说明 #基本使用 #配置主题 #配置图标 #配置滚动速度 #控制滚动的开始和暂停 #事件回调 #API #Props #Events 该组件用于滚动通告场景&#xff0c;有多种模式可供选择 #平台差异说明 AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√…...

编程日记 2024/1/18 16:31:54

蓝桥杯每日一题----货物摆放

题目 分析 上来一看&#xff0c;三个for循环&#xff0c;从1到n&#xff0c;寻找满足lwhn的个数&#xff0c;但是这样根本跑不出来答案&#xff0c;n太大了&#xff0c;1e15的级别&#xff0c;O&#xff08;n&#xff09;的时间复杂度都不行&#xff0c;更何况是O&#xff08;…...

编程日记 2024/1/18 16:30:51

（二十）Flask之上下文管理第一篇（粗糙缕一遍源码）

每篇前言&#xff1a; &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者 &#x1f525;&#x1f525;本文已收录于Flask框架从入门到实战专栏&#xff1a;《Flask框架从入…...

编程日记 2024/1/18 16:27:47

Tensorflow2.0笔记 - 基础数学运算

本笔记主要记录基于元素操作的,-,*,/,//,%,**,log,exp等运算&#xff0c;矩阵乘法运算&#xff0c;多维tensor乘法相关运算 import tensorflow as tf import numpy as nptf.__version__#element-wise运算&#xff0c;对应元素的,-,*,/,**,//,% tensor1 tf.fill([3,3], 4) ten…...

编程日记 2024/1/18 16:25:44

年底聚餐无压力，HUAWEI WATCH GT 4 助力体形管理和健康守护

过了腊八就是年&#xff0c;逢年过节聚餐频繁。在品味美食、享受亲情温馨的同时&#xff0c;你是否也在担心自己的健康与体形呢&#xff1f;华为WATCH GT 4搭载心率监测、血氧检测和减脂塑形等功能&#xff0c;让你尽情享受美食的同时保持健康。 华为WATCH GT 4的心率监测功能…...

编程日记 2024/1/18 16:23:42

Tomcat Notes: URL Mapping

This is a personal study notes of Apache Tomcat. Below are main reference material. - YouTube Apache Tomcat Full Tutorial&#xff0c;owed by Alpha Brains Courses. https://www.youtube.com/watch?vrElJIPRw5iM&t801s 1、URL Mapping To Resources1.1、What w…...

编程日记 2024/1/18 16:22:41

【JVM】JVM概述

JVM概述 基本介绍 JVM&#xff1a;全称 Java Virtual Machine&#xff0c;即 Java 虚拟机&#xff0c;一种规范&#xff0c;本身是一个虚拟计算机&#xff0c;直接和操作系统进行交互&#xff0c;与硬件不直接交互&#xff0c;而操作系统可以帮我们完成和硬件进行交互的工作特…...

编程日记 2024/1/18 16:18:36

【2023开发组二等奖】湖南省国土空间规划双评价系统

作品介绍 1 需求分析 1.1 背景与意义 在我国辽阔的国土空间中，各地区的地形地势、自然条件和资源环境禀赋存在显著差异。然而，随着人口增长和城市化进程加快，高强度的不合理开发和产业布局广泛分布，使得部分地区的经济社会发展规模超过了资源环境的承载能力。因此，执行主…...

编程日记 2024/1/18 16:17:35

Flutter为什么不需要子线程——Dart IO源码剖析（上）

Dart IO 源码剖析 许多Flutter新手&#xff0c;特别是安卓、iOS原生开发转做Flutter的小伙伴&#xff0c;一直对Flutter 单线程模型开发APP倍感不解&#xff0c;他们总是喜欢本能的把网络请求、文件读写放到一个单独线程去做&#xff0c;因为“耗时操作会阻塞UI线程嘛”。于是…...

编程日记 2024/1/18 16:13:30

STM32从入门到实战：两周速成指南

STM32快速入门指南&#xff1a;从零基础到项目实战1. 项目概述1.1 STM32与8051的对比分析对于已经掌握8051和C语言的开发者而言&#xff0c;STM32的学习曲线并不陡峭。关键在于理解何时需要从8051迁移到STM32平台&#xff1a;计算能力需求&#xff1a;当8051的主频无法满足复杂…...

编程新知 2026/3/27 10:13:30

移动端视频适配难题：xgplayer的CSS全屏模式实战指南（含16:9与9:16适配技巧）

移动端视频适配难题&#xff1a;xgplayer的CSS全屏模式实战指南&#xff08;含16:9与9:16适配技巧&#xff09; 在移动端视频播放场景中&#xff0c;屏幕比例适配一直是开发者面临的棘手问题。传统全屏模式在处理非常规比例视频&#xff08;如竖屏9:16内容&#xff09;时往往表…...

编程新知 2026/3/27 9:43:07

Qwen3字幕系统Linux部署指南：从安装到性能调优

Qwen3字幕系统Linux部署指南&#xff1a;从安装到性能调优 为视频内容自动生成精准字幕的时代已经到来 还记得手动为视频添加字幕的痛苦经历吗&#xff1f;一遍遍听写、校对、调整时间轴&#xff0c;几分钟的视频往往需要花费数小时。现在&#xff0c;基于Qwen3的智能字幕系统可…...

编程新知 2026/3/27 8:50:46

NaViL-9B实战手册：健康检查API与服务异常定位全流程

NaViL-9B实战手册&#xff1a;健康检查API与服务异常定位全流程 1. 平台概览 NaViL-9B是由专业AI研究机构开发的原生多模态大语言模型&#xff0c;能够同时处理纯文本问答和图片理解任务。该模型特别针对中文场景优化&#xff0c;支持中英文混合输入&#xff0c;为开发者提供…...

编程新知 2026/3/27 8:04:27

8_Harness驾驭工程实践：企业级落地与OpenAI案例解析

8_Harness驾驭工程实践&#xff1a;企业级落地与OpenAI案例解析 关键字&#xff1a; 企业级落地、OpenAI、Ryan Lopopolo、Codex、Harness Engineering、Citi Bank、Ancestry、Ulta Beauty、Agent-First开发、部署策略、自托管、成本优化、迁移路径、最佳实践、0行手写代码、百…...

编程新知 2026/3/27 7:42:15

第4章 编码规范-4.1 命名规范

在Python中&#xff0c;变量、常量、模块、包、函数、类、对象、属性、方法和异常类都具有一定的命名规范。但是&#xff0c;这些命名规范都是通用性规范&#xff0c;而不是强制性规范&#xff0c;所以具体的命名规范还需要以开发项目的要求为主。&#xff08;1&#xff09;变量…...

编程新知 2026/3/27 7:34:14

Cartool实战：手把手教你完成静息态EEG微状态分析的组水平聚类与模板匹配

Cartool实战&#xff1a;静息态EEG微状态分析全流程解析与避坑指南 在认知神经科学研究中&#xff0c;静息态EEG微状态分析正成为探索大脑动态功能网络的重要工具。不同于传统频域分析&#xff0c;微状态分析通过捕捉毫秒级地形图变化&#xff0c;揭示大脑信息处理的离散状态转…...

编程新知 2026/3/27 7:26:13

Qwen3.5小尺寸模型开源，9B碾压GPT开源版，消费级显卡就能跑

AI圈又出大新闻了✨ 阿里通义千问3.5系列小尺寸模型正式亮相&#xff0c;直接打破“小模型能力弱”的固有认知&#xff0c;甚至实现了“以小胜大”的逆袭&#xff0c;本地部署门槛直接拉到平民级&#xff01; 先上核心干货——这次千问3.5一口气推出了4款小尺寸模型&#xff0c…...

编程新知 2026/3/27 6:03:01

从Windows命令行小白到Scoop社区贡献者：我的完整成长指南

从Windows命令行小白到Scoop社区贡献者&#xff1a;我的完整成长指南 【免费下载链接】Scoop A command-line installer for Windows. 项目地址: https://gitcode.com/gh_mirrors/sc/Scoop 想要在Windows系统上快速安装和管理软件&#xff1f;厌倦了繁琐的图形界面安装过…...

编程新知 2026/3/27 5:28:47

SAP Fiori Launchpad 中 Spaces 与 Pages 的传输机制：从对象关系到项目落地的完整实践

在很多 SAP Fiori 项目里，团队把精力放在了应用开发、业务角色设计、SAPUI5 组件装配，或者 Fiori Elements 的元数据驱动页面构建上，却常常低估了一个看似普通、实际上极易影响上线结果的环节：Spaces 与 Pages 的传输。 这个主题之所以重要，不是因为操作本身复杂，而是因…...

编程新知 2026/3/27 4:44:02