南宁伯才网络公司做网站好吗,在别人网站上建设频道或栏目相关法律规定,flash网站引导页面制作,58同城做网站要钱吗概述
使用v-model绑定多选框也是一种比较常见的需求#xff0c;比如一个用户可以绑定多个角色#xff0c;可以有多个兴趣爱好。
在本节课中#xff0c;我们来学习一下这两种用法。
基本用法
我们创建src/components/Demo16.vue#xff0c;在这个组件中#xff0c;我们…概述
使用v-model绑定多选框也是一种比较常见的需求比如一个用户可以绑定多个角色可以有多个兴趣爱好。
在本节课中我们来学习一下这两种用法。
基本用法
我们创建src/components/Demo16.vue在这个组件中我们要
1定义roles响应式变量表示角色列表2定义hobbies变量表示兴趣爱好列表3定义一组多选框用于选择角色4定义一组多选框用于选择兴趣爱好5使用两个h3标签一个用来显示角色列表一个用来显示兴趣爱好列表
代码如下
script setup
import {ref} from vue;const roles ref([])
const hobbies ref([])/script
templatedivh3角色列表{{ roles }}/h3h3兴趣爱好{{ hobbies }}/h3/divdivh3请选择角色/h3input typecheckbox v-modelroles value总经理 总经理input typecheckbox v-modelroles value后端开发工程师 后端开发工程师input typecheckbox v-modelroles value架构师 架构师/divdivh3兴趣爱好/h3input typecheckbox v-modelhobbies value篮球 篮球input typecheckbox v-modelhobbies value足球 足球input typecheckbox v-modelhobbies value游泳 游泳input typecheckbox v-modelhobbies value排球 排球/div
/template接着我们修改src/App.vue引入Demo16.vue并进行渲染
script setup
import Demo from ./components/Demo16.vue
/script
templateh1欢迎跟着Python私教一起学习Vue3入门课程/h1hrDemo/
/template然后我们浏览器访问http://localhost:5173/ 完整代码
package.json
{name: hello,private: true,version: 0.1.0,type: module,scripts: {dev: vite,build: vite build},dependencies: {vue: ^3.3.8},devDependencies: {vitejs/plugin-vue: ^4.5.0,vite: ^5.0.0}
}vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vueexport default defineConfig({plugins: [vue()],
})index.html
!doctype html
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/htmlsrc/main.js
import { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)src/App.vue
script setup
import Demo from ./components/Demo16.vue
/script
templateh1欢迎跟着Python私教一起学习Vue3入门课程/h1hrDemo/
/templatesrc/components/Demo16.vue
script setup
import {ref} from vue;const roles ref([])
const hobbies ref([])/script
templatedivh3角色列表{{ roles }}/h3h3兴趣爱好{{ hobbies }}/h3/divdivh3请选择角色/h3input typecheckbox v-modelroles value总经理 总经理input typecheckbox v-modelroles value后端开发工程师 后端开发工程师input typecheckbox v-modelroles value架构师 架构师/divdivh3兴趣爱好/h3input typecheckbox v-modelhobbies value篮球 篮球input typecheckbox v-modelhobbies value足球 足球input typecheckbox v-modelhobbies value游泳 游泳input typecheckbox v-modelhobbies value排球 排球/div
/template启动方式
yarn
yarn dev浏览器访问http://localhost:5173/
