首页 > 其他分享 >Vue组件上使用v-model之单选框

Vue组件上使用v-model之单选框

时间:2022-10-13 16:24:07浏览次数:67  
标签:Vue ChildRadio 单选框 export picked valueName 组件 model

子组件内容:

<template>
  <div>
    <input
      type="radio"
      :id="valueName"
      :value="valueName"
      :checked="picked === valueName"
      :picked="picked"
      @click="$emit('change', $event.target.value)"
    />
    <label :for="valueName">{{ valueName }}</label>
  </div>
</template>

<script>
export default {
  props: ["picked", "valueName"],
  model: {
    prop: "picked",
    event: "change",
  },
  computed: {},
  methods: {},
};
</script>

<style>
</style>

 

 

父组件内容:

<template>
  <div>
    <child-radio
      v-for="valueName in valueNames"
      :key="valueName"
      v-model="picked"
      :valueName="valueName"
    ></child-radio>
    显示父组件单选的内容:{{ picked }} -->
  </div>
</template>

<script>
import ChildRadio from "./ChildRadio.vue";
export default {
  components: { ChildRadio },
  data() {
    return {
      picked: "", //
      valueNames: ["One", "Two", "Three"],
    };
  },
};
</script>

<style>
</style>

 

标签:Vue,ChildRadio,单选框,export,picked,valueName,组件,model
From: https://www.cnblogs.com/ZhouxsCode/p/16788481.html

相关文章

  • vue 项目引入 jquery
    一、引入jquery1.方式一默认会安装最新版本jquerynpminstalljquery 2.方式二指定版本[email protected] 3.方式三在package.json文件中 ......
  • 富文本 vue-quill-editor 用法
    1.下载npminstallvue-quill-editor--save2.在main.js中引入----全局引入//引入富文本importquillEditorfrom'vue-quill-editor'//引入样式import'quill/d......
  • Vite + Vue3 + Pinia + es6 + TypeScript 搭建项目
    vite中文参考文档:​​https://vitejs.cn/guide/#scaffolding-your-first-vite-project​​执行 npminitvite@latest步骤如下图:下载依赖npmi 启动项目:npmrundev......
  • Vue3动态路由
    1、引入router: import{useRouter}from'vue-router'2、定义letrouter=useRouter();3、动态添加路由router.addRoute({name:"users",path:'/User/users'......
  • vue-8 组件
    importVuefrom'vue'//全局部引入importElementUIfrom'element-ui'////按需引入import{Row,Button}from'element-ui'import'element-ui/lib/theme-chalk/i......
  • vue-directive__自定义指令
    vue-directive__自定义指令1.复制/***v-copy*复制某个值至剪贴板*接收参数:string类型/Ref<string>类型/Reactive<string>类型*/importtype{Directive,Direct......
  • Vue动态组件 表格
    Vue组件数据源//这里是HTML内容这里通过下面的引入框架结构把数据源传到框架中还有匹配项<Mytable:configList="configList":configData="configData"></Mytable>......
  • vue table表头固定,内容滚动实现
    先上效果   1<template>2<divclass="simpTable">3<table>4<thead>5<th6v-for="(item,index)oftableHe......
  • vuepress 运行报错 Vue packages version mismatch:
    vuepress运行报错Vuepackagesversionmismatch:D:\vuepress-test>npmrundocs:devnpmWARNconfigglobal`--global`,`--local`aredeprecated.Use`--location......
  • vue上传图片并生成海报
    用到的插件:vue-cropper(裁剪)  vue-canvas-poster(生成海报),最终合成海报调用裁剪插件方法getCropBlob,利用canvas画出海报。需求说明:默认有个海报缩略图展示,有模版可供......