首页 > 其他分享 >016.Vue3入门,表单输入绑定,以及lazy延时回车才显示

016.Vue3入门,表单输入绑定,以及lazy延时回车才显示

时间:2024-08-10 22:50:23浏览次数:11  
标签:username lazy checked 绑定 表单 016 Vue3

1、代码如下

<template>
  <h3>表单输入绑定</h3>
  <form>
    <!--    编辑框内容变化时候,下面标签同步显示编辑框内容-->
    <input type="text" v-model:="username">
    <P>{{ username }}</P>
    <!--    编辑框内容变化时候,按下回车后,标签才同步显示-->
    <input type="text" v-model.lazy="password">
    <P>{{ password }}</P>
    <!--    勾选后显示对应的文本-->
    <input type="checkbox" id="check1" v-model="checked">
    <label for="check1">{{ checked }}</label>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      checked: true,
    }
  }
}
</script>

<style>
</style>

2、效果如下:

 

标签:username,lazy,checked,绑定,表单,016,Vue3
From: https://www.cnblogs.com/tianpan2019/p/18352890

相关文章

  • [COCI2015-2016#3] NEKAMELEONI 题解
    前言题目链接:洛谷。题意简述你要维护一个序列\(a_i\in[1,k]\)(\(k\leq50\)),支持:单点修改;询问最短的包含全部\(1\simk\)的自区间长度,或报告无解。题目分析我想到了两种做法,写题解以加深印象。方法\(1\):直接用线段树维护只有单点修改,尝试用线段树维护分治。考虑......
  • 013.Vue3入门,在App.vue中加载显示子页面
    1、App.vue代码如下:<scriptsetup>importTestpage001from'./view/Testpage001.vue'</script><template><Testpage001/></template><style></style>2、如图所示 3、Testpage001的代码如下:<template><......
  • 012.Vue3入门,class属性的几种绑定方法
    1、代码如下:<template><h3>class绑定</h3><div:class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</div><div:class="classObject">Class样式绑定2</div><div......
  • 011.Vue3入门,计算属性的使用,让模板语法更简洁
    1、代码如下:<template><h3>计算属性</h3><div>{{func1}}</div><div>{{func1}}</div><div>{{func1}}</div><!--<div>{{func1()}}</div>--><!--<div>{{func1()}}&......
  • 010.Vue3入门,数组变化侦听,实时在界面显示变化后的数据
    1、代码如下:<template><h3>数组变化侦听</h3><button@click="addListHandle">添加数据</button><ul><liv-for="(item,index)ofnames":key="index">{{item}}</li></ul>&l......
  • 009.Vue3入门,事件修饰符的使用方法
    1、代码如下:<template><h3>事件修饰符</h3><[email protected]="clickHandle"href="http://www.baidu.com">百度</a><div@click="click1"><p@click="click2">测试1</p></div>......
  • 008.Vue3入门,最基础的事件处理,点击按钮增加次数,支持传参
    1、代码如下:<template><h3>内联事件处理群</h3><button@click="addCount1">Add</button><p>{{count1}}</p><button@click="addCount2('hello')">按钮</button><p>{{coun......
  • vue3中piniaPluginPersistedstate解决动态路由刷新空白问题
    总结:使用了回调函数来防止持久化数据前就渲染页面,导致刷新空白1.Store里的代码(**这里主要就是在addNewRoute写了回调callback**)addNewRoute(menuList,()=>{//重新渲染router.push({path:'/home/individual'})});import{defineStore}from"pinia";import......
  • 007.Vue3入门,进行列表渲染来输出循环的内容
    1、代码如下:<template><h3>列表渲染</h3><pv-for="(item,index)ofnames">序号:{{index}},内容:{{item}}</p><divv-for="itemofresult"><p>ID:{{item.id}},PKID:{{item.pkid}}</p>......
  • Vue3Pinia入门学习
    文章目录什么是pinia创建空Vue项目并安装Pinia1.创建空Vue项目2.安装Pinia并注册、基础用法:实现counter实现getters异步actionstoreToRefs保持响应式解构什么是piniaPinia是Vue的专属状态管理库,可以实现跨组件或页面共享状态,是vuex状态管理工具的替代品,和......