首页 > 其他分享 >vue3学习基础之表单相关

vue3学习基础之表单相关

时间:2023-12-26 15:13:02浏览次数:38  
标签:const Selected 表单 学习 num vue3 message ref

表单相关

<script setup>
import { ref } from "vue";

const message = ref("hello");
const checked = ref();
const checkedNames = ref([]);
const picked = ref();
const selected = ref();
const mulSelected = ref([]);

const num = ref(5);
const name = ref("John");
const msg = ref("hello");
</script>
<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>文本</span>
            </div>
          </template>
          <div>
            <p>Message is: {{ message }}</p>
            <p><input v-model="message" placeholder="edit me" /></p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>多行文本</span>
            </div>
          </template>
          <div>
            <p>Message is: {{ message }}</p>
            <p>
              <textarea
                v-model="message"
                placeholder="add multiple lines"
              ></textarea>
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>复选框</span>
            </div>
          </template>
          <div>
            <p>是否同意: {{ checked }}</p>
            <p>
              <input
                type="checkbox"
                id="checkbox"
                v-model="checked"
                true-value="yes"
                false-value="no"
              />
              <label for="checkbox">同意</label>
            </p>
            <p>Checked names: {{ checkedNames }}</p>
            <p>
              <input
                type="checkbox"
                id="jack"
                value="Jack"
                v-model="checkedNames"
              />
              <label for="jack">Jack</label>
              <input
                type="checkbox"
                id="john"
                value="John"
                v-model="checkedNames"
              />
              <label for="john">John</label>
              <input
                type="checkbox"
                id="mike"
                value="Mike"
                v-model="checkedNames"
              />
              <label for="mike">Mike</label>
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>单选按钮</span>
            </div>
          </template>
          <div>
            <p>Picked: {{ picked }}</p>
            <p>
              <input type="radio" id="one" value="One" v-model="picked" />
              <label for="one">One</label>
              <input type="radio" id="two" value="Two" v-model="picked" />
              <label for="two">Two</label>
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>选择器</span>
            </div>
          </template>
          <div>
            <p>Selected: {{ selected }}</p>
            <p>
              <select v-model="selected">
                <option disabled value="">Please select one</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
              </select>
            </p>
            <p>Selected: {{ mulSelected }}</p>
            <p>
              <select v-model="mulSelected" multiple>
                <option>A</option>
                <option>B</option>
                <option>C</option>
              </select>
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>修饰符</span>
            </div>
          </template>
          <div>
            <p>
              <span>{{ msg }}</span>
              <br />
              <input v-model.lazy="msg" />.lazy 在 "change" 事件后同步更新而不是
              "input"
            </p>
            <p>
              <span>{{ num }}</span>
              <br />
              <input v-model.number="num" />.number
              用户输入自动转换为数字,如果该值无法被 parseFloat()
              处理,那么将返回原始值。
            </p>
            <p>
              <span>{{ name }}</span>
              <br />
              <input v-model.trim="name" />.trim自动去除用户输入内容中两端的空格
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
.el-row {
  margin-top: 0.5rem;
}
</style>

 

标签:const,Selected,表单,学习,num,vue3,message,ref
From: https://www.cnblogs.com/caroline2016/p/17928169.html

相关文章

  • vue3学习基础之vue-router
    我的vue3学习之路总是学学停停,最开始在18年开发微信小程序,就发现小程序和vue的语法有些相似,然后就去看了vue2的文档,随后忙其它的事情就丢下了。直到22年又开始捡起来vue3,有了组合式api,语法简明很多,然后又不知道忙什么丢下。。。前段有些空时间,就把vue3的学习整理下,使用vite构建......
  • MySql的information_schema.processlist库学习之"如何检测出大数据sql查询"
    1.如何通过MySql检测出大数据sql查询一般数据库都会存在:information_schema数据库 检测出大数据sql查询[time时间越长说明,数据量越大,要根据公司的限度来衡量,我的思路是500以上都要查看是否是大数据的范畴]2.案例--检测出大数据sql查询[time时间越长说明,数据量越大,要根据......
  • 【源码系列#04】Vue3侦听器原理(Watch)
    专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核......
  • uniGUI学习之表格和链接(76)
    Delphi10.3如何在StringGrid某单元格下划线显示,并点击弹出新窗口拖一个UniHTMLFrame1到界面上<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>网页标题</title><basetarget=&qu......
  • uniGUI学习之禁用缓存(75)
    引用了第三方js,css等文件,但是因为缓存的原因,修改后没有及时生效。方法一:在ServerModule的OnHTTPCommand事件中,加入以下代码AResponseInfo.CacheControl:='max-age=0,no-cache,no-store,must-revalidate,proxy-revalidate';但是此方法有缺点,只支持exe模式,exe模式下所有的请求......
  • uniGUI学习之自定义Hint(74)
    默认Hint样式 procedureTMainForm.UniFormShow(Sender:TObject);vari:Integer;beginfori:=0toSelf.ControlCount-1dobeginwithTUniFormControl(Self.Controls[i])dobeginifHint<>''thenbeginShowHint......
  • stm32学习总结:4、Proteus8+STM32CubeMX+MDK仿真串口收发
    stm32学习总结:4、Proteus8+STM32CubeMX+MDK仿真串口收发文章目录stm32学习总结:4、Proteus8+STM32CubeMX+MDK仿真串口收发一、前言二、资料收集三、STM32CubeMX配置串口1、配置开启USART12、设置usart中断优先级3、配置外设独立生成.c和.h四、MDK串口收发代码(中断回调接收后发送接......
  • 自主智能体与增强学习:实现人工智能的关键
    1.背景介绍人工智能(ArtificialIntelligence,AI)是一门研究如何让计算机模拟人类智能行为的科学。自从1950年代以来,人工智能一直是计算机科学的一个热门研究领域。人工智能的目标是让计算机能够理解自然语言、进行逻辑推理、学习自主行动、感知环境、进行情感交互等。自主智能体(Aut......
  • VUE3 + Three.js 坑
    VUE3+Three.js坑1.问题描述将scene、camera、renderer、controls等变量用reactive变成响应式时,页面渲染会报错:three.module.js?5a89:24471UncaughtTypeError:'get'onproxy:property'modelViewMatrix'isaread-onlyandnon-configurabledatapropertyonthe......
  • 2023年最实用的Android Framework学习路线,让你轻松通过面试和适应实际工作
    许多Android开发者和应聘者都曾反映,在面试或考核过程中,经常遇到与AndroidFramework相关的问题。这些问题常常让他们感到困惑和不安,因为这些问题的确需要深入的理解和扎实的基础。Framework层的原理和机制对于Android开发来说至关重要。从应用启动到用户使用,整个过程中都离不开Fram......