{"id":8943,"date":"2024-03-14T08:51:36","date_gmt":"2024-03-14T08:51:36","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/"},"modified":"2024-03-20T14:19:12","modified_gmt":"2024-03-20T14:19:12","slug":"how-to-implement-the-single-selection-function-in-uniapp","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/","title":{"rendered":"How to implement the single selection function in Uniapp?"},"content":{"rendered":"<p>In uniapp, you can use the radio component to implement single selection functionality. The specific steps are as follows:<\/p>\n<ol>\n<li>In the vue file of the page where the single selection feature needs to be added, use the radio component to create radio buttons. For example:<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">radio<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"selectedValue\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"1\"<\/span>&gt;<\/span>\u9009\u98791<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">radio<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">radio<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"selectedValue\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"2\"<\/span>&gt;<\/span>\u9009\u98792<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">radio<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">radio<\/span> <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"selectedValue\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"3\"<\/span>&gt;<\/span>\u9009\u98793<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">radio<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<ol>\n<li>Define a variable selectedValue in the data to store the value selected by the user, for example:<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-title function_\">data<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n  <span class=\"hljs-keyword\">return<\/span> {\r\n    <span class=\"hljs-attr\">selectedValue<\/span>: <span class=\"hljs-literal\">null<\/span>\r\n  }\r\n}\r\n<\/code><\/pre>\n<ol>\n<li>When the user clicks on the radio buttons, the value of selectedValue will be updated to the value chosen by the user. You can use watch to monitor the changes in selectedValue and perform corresponding actions, such as:<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-attr\">watch<\/span>: {\r\n  <span class=\"hljs-title function_\">selectedValue<\/span>(<span class=\"hljs-params\">newValue, oldValue<\/span>) {\r\n    <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">'\u7528\u6237\u9009\u62e9\u4e86'<\/span>, newValue)\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>By following the steps above, you can add a single selection feature in uniapp.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In uniapp, you can use the radio component to implement single selection functionality. The specific steps are as follows: In the vue file of the page where the single selection feature needs to be added, use the radio component to create radio buttons. For example: &lt;radio v-model=&#8221;selectedValue&#8221; :value=&#8221;1&#8243;&gt;\u9009\u98791&lt;\/radio&gt; &lt;radio v-model=&#8221;selectedValue&#8221; :value=&#8221;2&#8243;&gt;\u9009\u98792&lt;\/radio&gt; &lt;radio v-model=&#8221;selectedValue&#8221; :value=&#8221;3&#8243;&gt;\u9009\u98793&lt;\/radio&gt; Define [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-8943","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to implement the single selection function in Uniapp? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to implement the single selection function in Uniapp?\" \/>\n<meta property=\"og:description\" content=\"In uniapp, you can use the radio component to implement single selection functionality. The specific steps are as follows: In the vue file of the page where the single selection feature needs to be added, use the radio component to create radio buttons. For example: &lt;radio v-model=&quot;selectedValue&quot; :value=&quot;1&quot;&gt;\u9009\u98791&lt;\/radio&gt; &lt;radio v-model=&quot;selectedValue&quot; :value=&quot;2&quot;&gt;\u9009\u98792&lt;\/radio&gt; &lt;radio v-model=&quot;selectedValue&quot; :value=&quot;3&quot;&gt;\u9009\u98793&lt;\/radio&gt; Define [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T08:51:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-20T14:19:12+00:00\" \/>\n<meta name=\"author\" content=\"Olivia Parker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olivia Parker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/\"},\"author\":{\"name\":\"Olivia Parker\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\"},\"headline\":\"How to implement the single selection function in Uniapp?\",\"datePublished\":\"2024-03-14T08:51:36+00:00\",\"dateModified\":\"2024-03-20T14:19:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/\"},\"wordCount\":123,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/\",\"name\":\"How to implement the single selection function in Uniapp? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T08:51:36+00:00\",\"dateModified\":\"2024-03-20T14:19:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to implement the single selection function in Uniapp?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\",\"name\":\"Olivia Parker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"caption\":\"Olivia Parker\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to implement the single selection function in Uniapp? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/","og_locale":"en_US","og_type":"article","og_title":"How to implement the single selection function in Uniapp?","og_description":"In uniapp, you can use the radio component to implement single selection functionality. The specific steps are as follows: In the vue file of the page where the single selection feature needs to be added, use the radio component to create radio buttons. For example: &lt;radio v-model=\"selectedValue\" :value=\"1\"&gt;\u9009\u98791&lt;\/radio&gt; &lt;radio v-model=\"selectedValue\" :value=\"2\"&gt;\u9009\u98792&lt;\/radio&gt; &lt;radio v-model=\"selectedValue\" :value=\"3\"&gt;\u9009\u98793&lt;\/radio&gt; Define [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T08:51:36+00:00","article_modified_time":"2024-03-20T14:19:12+00:00","author":"Olivia Parker","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Olivia Parker","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/"},"author":{"name":"Olivia Parker","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9"},"headline":"How to implement the single selection function in Uniapp?","datePublished":"2024-03-14T08:51:36+00:00","dateModified":"2024-03-20T14:19:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/"},"wordCount":123,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/","name":"How to implement the single selection function in Uniapp? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T08:51:36+00:00","dateModified":"2024-03-20T14:19:12+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-the-single-selection-function-in-uniapp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to implement the single selection function in Uniapp?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9","name":"Olivia Parker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","caption":"Olivia Parker"},"url":"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/8943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=8943"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/8943\/revisions"}],"predecessor-version":[{"id":42096,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/8943\/revisions\/42096"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=8943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=8943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=8943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}