怎么建设个人主页网站,网页设计论文初稿,电商网站建设推广,福州网站建设自助建站概述
使用v-model绑定单选框也比较常见#xff0c;比如性别#xff0c;要么是男#xff0c;要么是女。比如单选题#xff0c;给出多个选择#xff0c;但是只能选择其中的一个。
在本节课中#xff0c;我们演示一下这两种常见的用法。
基本用法
我们创建src/component…概述
使用v-model绑定单选框也比较常见比如性别要么是男要么是女。比如单选题给出多个选择但是只能选择其中的一个。
在本节课中我们演示一下这两种常见的用法。
基本用法
我们创建src/components/Demo15.vue在这个组件中我们要
1定义answer响应式变量表示答案2定义gender变量表示性别3定义一组单选框用于选择性别4定义一组单选框用于选择答案5使用两个h3标签一个用来显示性别一个用来显示答案
代码如下
script setup
import {ref} from vue;const answer ref(A)
const gender ref(男)/script
templatedivh3性别{{ gender }}/h3h3答案{{ answer }}/h3/divdivh3请选择性别/h3input typeradio v-modelgender value男 男input typeradio v-modelgender value女 女/divdivh3请选择答案/h3input typeradio v-modelanswer valueA Ainput typeradio v-modelanswer valueB Binput typeradio v-modelanswer valueC Cinput typeradio v-modelanswer valueD D/div
/template接着我们修改src/App.vue引入Demo15.vue并进行渲染
script setup
import Demo from ./components/Demo15.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/Demo15.vue
/script
templateh1欢迎跟着Python私教一起学习Vue3入门课程/h1hrDemo/
/templatesrc/components/Demo15.vue
script setup
import {ref} from vue;const answer ref(A)
const gender ref(男)/script
templatedivh3性别{{ gender }}/h3h3答案{{ answer }}/h3/divdivh3请选择性别/h3input typeradio v-modelgender value男 男input typeradio v-modelgender value女 女/divdivh3请选择答案/h3input typeradio v-modelanswer valueA Ainput typeradio v-modelanswer valueB Binput typeradio v-modelanswer valueC Cinput typeradio v-modelanswer valueD D/div
/template启动方式
yarn
yarn dev浏览器访问http://localhost:5173/
