vue3 学习-初识体验-常见指令v-for和v-model
继续通过小案例来体验一些常用的指令, 以经典的todolist进行展示. 首先呢通过 v-for 指令进行dom循环.
v-for
通常是在循环dom的编写的同时遍历数据进行填充.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
list: ['hello', 'world', 'vue', 'react']
}
},
template: `
<ul>
<li v-for="(item, index) of list">{{item}} {{index}}</li>
</ul>
`
}).mount('#root')
</script>
</body>
</html>
则显示结果如下:
* hello 0
* world 1
* vue 2
* react 3
v-model
用来对输入框的值和数据进行双向绑定 (共用一个数据)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
inputValue: '',
list: []
}
},
methods: {
addItem () {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
template: `
<div>
<input v-model="inputValue" />
<button @click="addItem">增加</button>
<ul>
<li v-for="(item, index) of list">{{item}} {{index}}</li>
</ul>
</div>
`
}).mount('#root')
</script>
</body>
</html>
对于 v-for 的使用是极高频的, 但其实只需要了解其语法就可以了, 仅从工具使用的角度; 对于 v-model 同理, 理解输入框的值和数据用的值都用一个 inputValue 变量进行双向绑定, 或者说共享吧.这个特别高效. 以前用原生 js 来弄还是比较麻烦的, 又要处理 dom 又要处理数据. 通过 vue 这种工具就极大降低了开发的难度, 而且还特别好用.
vue3 学习-初识体验-常见指令v-for和v-model的更多相关文章
- Java学习-035-JavaWeb_004 -- JSP include 指令
inclue 指令是将不同的文件插入到 JSP 网页中,这些文件可以是文本文件.HTML文件.JSP 文件,指令语法如下: <%@include file="相对路径"%&g ...
- Java学习-034-JavaWeb_003 -- JSP page 指令
前文对 JSP 的基础知识进行了初步的讲解,此文主要讲述 JSP page 指令. page 指令用于定义页面的多种属性,例如:脚本语言.编码方式.导入的 Java 包等,page 执行的语法如下: ...
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- JVM学习笔记——字节码指令
JVM学习笔记——字节码指令 字节码 0与 1是计算机仅能识别的信号,经过0和1的不同组合产生了数字之上的操作.另外,通过不同的组合亦产生了各种字符.同样,可以通过不同的组合产生不同的机器指令.在不同 ...
- 在Windows环境中开始Docker的学习和体验
研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...
- JSP常见指令
JSP常见指令 标签: jspincludeservletjavaappletarchive 2011-11-07 20:07 13193人阅读 评论(3) 收藏 举报 版权声明:本文为博主原创文章, ...
- AngularJS1.X学习笔记8-自定义指令（上）
AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
随机推荐
- 在Unity中玩转表达式树：解锁游戏逻辑的动态魔法
html { overflow-x: initial !important } :root { --bg-color: #ffffff; --text-color: #333333; --select ...
- QT5笔记：27. MDI应用程序设计
MDI:Multiple Document Interface 多窗口文档界面 例子: MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H # ...
- Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来! 1. 优势介绍 Obsidian 是一款强大的本地知识管理软件,它像一个积木盒,让你用 Markdown 笔记 ...
- 基于Qt的在QGraphicsView中绘制带有可动拐点的连线的一种方法
摘要:本文详细介绍了基于Qt框架在`QGraphicsView`中实现带有可动拐点连线的绘制方法.通过自定义`CustomItem`和`CustomPath`类,结合`QGraphicsIte ...
- 【2022_12_2】Fibersim安装记录
Fibersim 安装记录 1. 为什么要写这个文章? 因为我前前后后装了四天才装成功.在我的电脑上,fibersim14 16 17 15 挂到UG10 12 CatiaV5-6R2019 2018 ...
- gorm stdErr = sql: Scan error on column index 0, name "total": converting NULL to float64 is unsupported
前言 使用 gorm 查询时,报错:stdErr = sql: Scan error on column index 0, name "total": converting NUL ...
- ubuntu 22.04 deskop 无法打开terminal
系统语言设置的问题,改为汉语即可
- Go Module使用 六大场景讲解示例
前言 通过学习Go是怎么解决包依赖管理问题的?.go module基本使用,我们掌握了 Go Module 构建模式的基本概念和工作原理,也初步学会了如何通过 go mod 命令,将一个 Go 项目转 ...
- linux php安装mongodb 扩展
下载扩展 首先从这个网站选择适合你当前 php 版本的的 mongodb 扩展 https://pecl.php.net/package/mongodb wget https://pecl.php.n ...
- 无人机 offboard 控制
博客地址:https://www.cnblogs.com/zylyehuo/ 参考 https://space.bilibili.com/393165606/channel/collectiondet ...