vue3中v-on 、v-model与v-for和v-bind

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>佳丽列表</title><script src="https://unpkg.com/vue@next"></script>
</head><body><div id="app"></div>
</body>
<script>const app = Vue.createApp({data() {return {inputValue: '',list: []}},methods: {handleAddItem() {this.list.push(this.inputValue)this.inputValue = ''}},template: `<div><my-title /><input v-model="inputValue" /><button v-on:click="handleAddItem">增加佳丽</button><ul><my-jiali v-for="(item,index) of list"  v-bind:item="item" v-bind:index="index"  /></ul></div>`})app.component('my-title', {template: '<h1 style="text-align:center">象牙山洗脚城</h1>'})app.component('my-jiali', {props: ['item', 'index'],template: ` <li >[{{index}}]-{{item}}</li>`})app.mount("#app")
</script></html>

v-on 指令添加一个事件监听器，通过它调用在实例中定义的方法可以用@简写代替

v-for 指令可以绑定数组的数据来渲染一个项目列表

v-model 指令能轻松实现表单输入和应用状态之间的双向绑定

v-bind 指令将待办项传到循环输出的每个组件中

vue3中v-on 、v-model与v-for和v-bind相关推荐

oracle v$access执行很慢,Oracle bug之v$access
今天在客户数据库查询一表格的访问情况,结果系统出现引用 SQL> / EVENT ------------------------------------------------------- ...
【归档】证明V的三个子空间的并是V的子空间，当且仅当其中一个子空间包含另外两个子空间
Note: 旧的wordpress博客弃用,于是将以前的笔记搬运回来. Foreword: 标记,目前没有完成这道题,想出证明后会进行完善. Question: Prove that the unio ...
vue3 中使用动画技术
vue3 中使用动画技术作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.21 ...
Vue3中TSX和h函数的用法
Vue3中TSX的用法补充:(jsx用法)[https://github.com/vuejs/babel-plugin-jsx] (vue3中渲染函数&JSX)[https://cn.vue ...
深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
因为 Diff 算法,计算的就是虚拟 DOM 的差异,所以先铺垫一点点虚拟 DOM,了解一下其结构,再来一层层揭开 Diff 算法的面纱,深入浅出,助你彻底弄懂 Diff 算法原理认识虚拟 DOM ...
vue3中使用百度地图BMAP
在Vue3中使用百度地图,可以按照以下步骤进行: 1. 在项目中引入百度地图的API文件.可以在public/index.html文件中添加以下代码: <script type="te ...
NLP中的语言模型(language model)
什么是语言模型本文参考维基百科语言模型 language model 统计语言模型是一个单词序列上的概率分布,对于一个给定长度为m的序列,它可以为整个序列产生一个概率 P(w_1,w_2,-,w_m ...
中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
vue3中v-model的重大更新
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件 Vue.component('custom-input', {props: ['value'],te ...
实际记录vue3中使用rrweb以及rrweb-player组件实现网页录屏和回放功能，还有遇到的问题和解决思考
文章目录前言一.rrweb与rrweb-player引入项目中二.使用步骤 1.引入代码 2.html部分代码 3.script部分代码三. 遇到的3个问题总结,全部都是找了很久解决办法没找到 ...

vue3中v-on 、v-model与v-for和v-bind

vue3中v-on 、v-model与v-for和v-bind相关推荐

最新文章

热门文章