首页 > 其他分享 >v-model的使用

v-model的使用

时间:2024-04-20 10:44:39浏览次数:25  
标签:option 元素 value 使用 input model select

v-model的作用实现元素或组件上的双向绑定

v-model指令只能用于:

 在input元素上使用v-model绑定,实际就是给元素的value属性赋值

在input元素和select元素使用v-model

 在上述代码中,input元素和select元素都使用v-model绑定了同一个值,

页面为:

 

 可以看到输入框和选择框的值是相互对应的,在select元素的中,绑定的v-model的number值为多少就对应着value值为多少,在option元素中,如果有对应的value值就显示

 

select元素的option元素,使用v-for实现循环数组

 在上述的代码中,创建了一个数组options,在select元素的option元素中,使用了v-model去循环这个数组,

注意:在option元素中的value属性需要写成:value,才能正确读取到循环对象item

options值的显示,可以直接使用{{item.label}},也可以在option元素的label属性赋值,同样使用:label

textarea元素和input元素大同小异,不做记录,

components在后续组件的学习中再进行记录

标签:option,元素,value,使用,input,model,select
From: https://www.cnblogs.com/123-hh/p/18147303

相关文章

  • clion使用技巧
    ctrl+w每按一次,鼠标所在地方选区就往前扩大一部分ctrl+shift+w 每按一次,ctrlw选择的区域就缩小一部分edit-》Macros 录制宏,可以自己一些操作然后保存为快捷键,可看https://zhuanlan.zhihu.com/p/616387998ctrl+shift+i ,把鼠标放在一个方法上,按这个快捷键,可以看到这个方法......
  • 微信小程序video在组件中的使用---暂停视频
    首先在wxml文件中设置video的id<videoid='myVideo'src='{{video}}'controls='true'></video>然后在js文件中通过wx.createVideoContext获取VideoContext实例letvideoCtx=nullletapp=getApp()Component({properties:{},......
  • 生成环境使用skywalking链路跟踪
    第一、按照dockerdocker-compose第二、安装skywalking数据存储esdockerrun-d--nameelasticsearch\--restartalways\-p9200:9200\-p9300:9300\-e"discovery.type=single-node"\-e"ES_JAVA_OPTS=-Xms256m-Xmx256m"\......
  • nestjs 中管道的使用-验证DTO
    1.安装管道nestgpirole意思是安装一个role模块的管道2.在controller中使用管道 管道的作用:1.数据的转换2.DTO规则验证 一般使用全局配置管道 区别:自己写:需要一个个的带入 ......
  • 前端使用 Konva 实现可视化设计器(6)
    请大家动动小手,给我一个免费的Star吧~这一章处理一下复制、粘贴、删除、画布归位、层次调整,通过右键菜单控制。github源码gitee源码示例地址复制粘贴复制粘贴(通过快捷键)//复制暂存pasteCache:Konva.Node[]=[];//粘贴次数(用于定义新节点的偏移距离)past......
  • 使用float,flex和tailwind实现同一个表单注册效果
    float方式html结构<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</titl......
  • Asp-Net-Core开发笔记:使用alpine镜像并加入健康检查
    前言使用docker部署AspNetCore应用已经是标配了,之前我一直使用mcr.microsoft.com/dotnet/aspnet:8.0这类镜像,简单粗暴,不过可以使用alpine进一步优化镜像大小。很多开源工具的docker都有健康检查,这次我顺便也给加上了。添加健康检查注册服务builder.Services.AddHea......
  • burpsuite使用深色主题暗色主题[保姆姬教程,方便快捷]
    点开burpsuite后点右上角的齿轮,在弹出的新窗口的搜索框搜索'theme',然后点'dark'.具体如图成了PS:我在网上搜burp改暗色主题,全是一大堆要么一上来吹水,要么得下插件的麻烦的教程,我跟着教程搞了一会儿才发现burp自带个暗色主题.于是写下这篇随笔.......
  • 【开源】使用Python+Flask+Mysql快速开发一个用户增删改查系统
    项目演示项目本身很简单,增删改查是几乎所有系统的骨架。正所谓万丈高楼平地起,学会了增删改查,航母就指日可待了:),光速入门,直接看演示图:项目地址https://github.com/mudfish/python-flask-user-crudFlask框架介绍说白了就是一个Web框架,能够让你快速开发出Pythonweb应用。简单易......
  • 性能测试——性能测试-linux监控工具——Jmeter插件之ServerAgent服务器性能监控工具
    安装插件1、在Jmeter官网:https://jmeter-plugins.org/wiki/PluginsManager/下载插件管理器Plugins-manager.jar  参考博客地址:https://blog.csdn.net/qq_45664055/article/details/105979481              需要先安装java,设置环境变量: ......