【Vue3】2-13 : 章节总结

本书目录:点击进入

一、总结内容

二、习题

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 【编程题】以下Vue指令中,哪些指令具备简写方式?

要求如下:

        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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/623143.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3、Linux中合并两个文件

目录 使用 cat 命令 使用 tail 或 head 命令 使用 cat 命令 cat file1.txt file2.txt > merged_file.txt 这个命令会将 file1.txt 和 file2.txt 的内容按顺序合并&#xff0c;并将合并后的内容重定向到 merged_file.txt。 cat file2.txt >> file1.txt 这会将 fil…

1116: 删除元素(数组)

题目描述 输入一个递增有序的整型数组A有n个元素&#xff0c;删除下标为i的元素&#xff0c;使其仍保持连续有序。注意&#xff0c;有效下标从0开始。 定义如下两个函数分别实现删除元素操作和数组输出操作。 void del(int a[], int n, int i); /*删除数组a中下标为i的元素*…

分布式计算平台 Hadoop 简介

Hadoop简介 Hadoop是一种分析和处理大数据的软件平台&#xff0c;是一个用Java语言实现的Apache的开源软件框架&#xff0c;在大量计算机组成的集群中实现了对海量数据的分布式计算。其主要采用MapReduce分布式计算框架&#xff0c;包括根据GFS原理开发的分布式文件系统HDFS、…

鸿蒙App开发-网络请求-下拉刷新三方库-底部Tab栏-滚动组件(含源码)

本文介绍一个基于鸿蒙ArkTS开发的App&#xff0c;是一个包含轮播图、文章列表和 Web 页面等功能的多页面应用。 本文主要内容包括&#xff1a; 一、效果图 首页 详情页 二、内容简介 1.底部Tab栏和两个页面 App底部是一个TabBar&#xff0c;点击TabBar可以切换上面的页面。共…

半监督学习 - 半监督支持向量机(Semi-Supervised Support Vector Machines)

什么是机器学习 半监督支持向量机&#xff08;Semi-Supervised Support Vector Machines&#xff0c;S3VM&#xff09;是支持向量机&#xff08;SVM&#xff09;的一种扩展&#xff0c;旨在处理训练数据中只有少量样本被标记的情况。与传统的监督SVM不同&#xff0c;S3VM通过结…

FFmpeg解决视频播放加载卡顿问题(FFmpeg+M3U8分片)

FFmpeg解决视频播放加载卡顿问题(FFmpegM3U8分片) 在这静谧的时光里&#xff0c;我们能够更清晰地审视自己&#xff0c;思考未来的方向。每一步的坚实&#xff0c;都是对勇气的拥抱&#xff0c;每一个夜晚的努力&#xff0c;都是对未来的信仰。不要害怕独行&#xff0c;因为正是…

spring boot application yaml key下划线如何转java的Properties对象字段驼峰

spring boot yaml key和value如何映射到Properties对象 下面以MybatisPlusProperties为例 ##java properties 字段驼峰 ##yaml文件如图&#xff0c;key使用下划线 ##java对象驼峰转下划线匹配yaml文件key DataObjectPropertyName.toDashedForm(name);//驼峰转下划线 ##设置P…

开发er们必知的Git命令

Git和GitHub是每位软件工程师都必须了解的最基本的东西。这些工具是开发人员日常工作的组成部分,因为我们每天都要与它们进行交互。熟练掌握Git不仅能简化您的生活,还能显著提高生产力。在这篇博文中,我们将探索一组命令,这些命令将大大提高您的生产力。随着您对这些命令的掌握…

Codeforces Round 779 (Div. 2) D2. 388535(思维题 二进制性质/trie树上最大最小异或)

题目 t(t<1e5)组样例&#xff0c;每次给定l,r(0<l<r<2^17) 和r-l1个数ai&#xff0c;新序列是被[l,r]这些数异或上同一个x得到的&#xff0c; 求出x&#xff0c;有多个输出任意一个即可 思路来源 官方题解 洛谷题解 Educational Codeforces Round 157 (Rated…

Linux系统使用超详细(十)~vi/vim命令①

vi/vim命令有很多&#xff0c;其实只有少数的用法对于我们日常工作中起到了很大帮助&#xff0c;但是既然我选择梳理Linux的学习笔记&#xff0c;那么一定全力把自己的理解和学习笔记的内容认真整理汇总&#xff0c;内容或许有错误&#xff0c;还请发现的C友们发现了及时指出。…

swift对接环信sdk

准备 熟练objective-c语言 有一台mac电脑,并安装了xcode 和 cocoapods 内容篇幅较长,需要内心平和耐心看下去,务必戒躁. 学习目的 手把手教大家如何在iOS应用中集成环信IM 明确表示,内容一定全面,没有任何丢失,只要沉得住气,耐得下心,3小时即可搞定. 若经常阅读文档以及语…

如何写好技术博客

文章目录 1. 目的2. 实施方法3. 论文结构3.1 摘要写法3.2 背景写法3.3 正文写法3.4 结论写法 4. 期望5.参考文献 1. 目的 读书和工作以来&#xff0c;发现我存在一个问题&#xff1a;很多东西无法用自己的语言来描述&#xff0c;导致沟通容易出现问题。咨询了身边的一些同事和…

CTFhub-phpinfo

CTFhub-Web-信息泄露-“phpinfo” 题目信息 解题过程 ctrlF搜索关键字…

探索数据之美:深入Seaborn的数据可视化艺术与技巧【第26篇—python:Seaborn】

文章目录 1. 引言2. Seaborn基础2.1 安装和环境设置2.2 常用数据可视化函数2.3 设置样式和颜色主题 3. 数据准备与导入3.1 使用Pandas库加载和处理数据3.2 数据清理和缺失值处理 4. Seaborn中的常见图表4.1 折线图和散点图&#xff1a;展示趋势和变量关系4.2 条形图和箱线图&am…

树莓派4B-Python-使用PCA9685控制舵机云台+跟随人脸转动

系列文章 树莓派4B-Python-控制舵机树莓派-Pico控制舵机树莓派4B-Python-使用PCA9685控制舵机云台跟随人脸转动&#xff08;本文章&#xff09; 目录 系列文章前言一、SG90s舵机是什么&#xff1f;二、PCA9685与舵机信号线的接线图三、控制SG90s云台&#xff08;也可用来测试舵…

MongoDB Compass 的教程

第一步&#xff1a;建立连接 点击Save&Connect 增加数据库&#xff1a; 填写数据库名字和文档名字并点击Create Database 删除文档&#xff1a; 创建文档&#xff1a; 插入文档数据 {Id:1001,name:"cyl",age:21} 插入成功&#xff1a; 更改原有数据 删除原有数据…

ACM论文LaTeX模板解析(二)| documentclass设置

本文收录于专栏&#xff1a;ACM 论文 LaTeX模板解析&#xff0c;本专栏将会围绕ACM 论文 LaTeX模板解析持续更新。欢迎点赞收藏关注&#xff01; 文章目录 要使用documentclass类&#xff0c;请在文件的开头中写明&#xff1a; \documentclass[⟨options⟩]{acmart}有几个选项…

Spring 计时器StopWatch

背景 在做开发的时候需要记录每个任务执行时间&#xff0c;或者记录一段代码执行时间&#xff0c;简单且粗暴的方法就是打印当前时间与执行完时间的差值&#xff0c;然后这样如果执行大量测试的话就很麻烦&#xff0c;并且不直观&#xff0c;如果想对执行的时间做进一步控制&a…

SpringBoot-项目部署

SpringBoot项目部署可以通过将项目打成可执行的jar包或war包来实现&#xff0c;也可以使用容器化技术如Docker将项目部署到云平台中。在部署时需要注意配置文件的位置和启动参数的设置&#xff0c;同时确保目标环境中的Java版本与项目所需的Java版本一致。部署完成后&#xff0…