1. 程式人生 > >vue中單選框設定預設選中值

vue中單選框設定預設選中值

vue中單選框的預設選中不同於傳統方式設定checked,是通過在data中設定vulue來實現的
  • html部分是通過v-for取的後臺的資料
 <li v-for="(value,i) in addList" :key="value.id">                   
      <input class="radio" type="radio" name="radios" :value="i" v-model="radio" />                                     
</li>
  • 生成後的程式碼就是
 <li>               
      <input class="radio" type="radio" name="radios" value="0" v-model="radio" />    
      <input class="radio" type="radio" name="radios" value="1" v-model="radio" />    
      <input class="radio" type="radio" name="radios" value="2" v-model="radio" />                                  
</li>
  • js部分(只需要將v-model的data值設定為想要預設選中的value值即可)
//在data中設定預設選中第一個
radio:'0',

相關推薦

vue設定預設選中

vue中單選框的預設選中不同於傳統方式設定checked,是通過在data中設定vulue來實現的 html部分是通過v-for取的後臺的資料 <li v-for="(value,i) in addList" :key="value.id"&

Android 給WebView 的輸入設定預設輸入

目的:通過WebView 顯示一個網頁,並給輸入框設定預設值。 1、獲取網頁端輸入框的id 如要顯示的網頁為https://www.amazon.com/a/code,通過google瀏覽器--更多工具--開發者工具顯示script,如下圖所示 從中找出輸入框id為

html標籤用法解析及如何設定checkbox複預設選中狀態

本文導語: html中<checkbox>標籤用法解析及如何設定checkbox複選框的預設選中狀態(由www.169it.com蒐集整理)html中複選框Checkbox物件代表一個 HTML 表單中的 一個選擇框。html中複選框Checkbox物件的屬性屬性 描述a...

radio總結(獲取設定預設選中、樣式)

input[type="radio"] + label::before {    content: "\a0";    display: inline-block;    vertical-align: middle;    width: 15px;    height: 15px;    margin-ri

elementUI 表格前邊的複設定預設

<el-table :data="tableData" v-loading="showloading" element-loading-background="rgba(0, 0, 0, 0.3)" border stripe > <

關於MUI中點選中的樣式

HTML---部分 <div class="mui-input-row mui-radio mui-left"> <label>設為預設</label> <input name="radio" type="radio" checked="chec

select和多設定預設

在使用select單選框的時候,有時候需要配合後臺傳遞的資料設定預設值。這時候需要js來設定select單選框的預設值。 比如我們定義瞭如下的單選框 <select name="locus" id="selected" class="form-control">

layui和jQuery根據資料庫給複設定預設選中checked

設定複選框被選中 根據資料庫查詢的資料與input標籤的title的值對比,相同則頁面載入時預設被選中 layui設定被選中後,必須要進行“更新渲染”後,複選框才會顯示被選中,否則只是checked改變,頁面複選框無變化 更新渲染 1. 頁面

Android 介面卡(預設選中從資料庫查出為True的選項)

網上看了好多單選的案例,沒有看到說從資料庫查值的為單選的,自己最近又有這個需求,索性就寫一個吧,雖然說現在都流行H5的了,但原生總會有些情況下需要做的吧package com.cntaipu..Adapater; import android.app.Activity; i

JQuery設置選中

dom true ttr val tro select sel 使用 jquery 使用$(selector).val(‘value‘).attr(‘checked‘,true),會導致DOM上所有的單選/復選的value都會變成 value 解決辦法:使用 $(“【nam

vue與反

事件 狀態 dex 主要部分 過濾 lis 反選 觸發事件 value   html主要部分:  <template v-for="(item, index) in checkboxList">   <input type="checkbox" v

.net後臺給前臺的普通Radio 動態賦選中你要的性別。

前臺程式碼如下:<input type="hidden" id="hidSex" value="<%= model_user.Sex %>"/> <input t

判斷是否被選中

 if(!$('.cbox').is(':checked')){//is() 判斷是否勾選同意   alert('請勾選同意');   return false;  }  ----------- &l

【js小方法】提交表是,判斷是否被選中

html程式碼 <p>單選,至少選擇一個</p> <form name="form1" method="post" action="" onsubmit="return postform(this)"> <

判斷input的radio哪個被選中

普通表<input id="isNormal" name="isMiddle" type="radio" value="1" checked="checked"> 關聯表<input id="notNormal" name="isMiddle"

微信小程式自定義賦

這裡我們應用之前一篇寫過的彈框效果 , 哈哈哈 ,是不是很萬精油;單選框我們運用偽元素自定義,不使用圖片 , 這個例子可以運用到很多情況; 知識點: 1、理解wx:if作用 2、理解三元運算子的使用 3、利用偽元素after/before自定義內容 4、定時器setTimeout的使用 照例

vue選中和最後傳給後臺不一樣,怎麼獲取

vue中的單選框選中值和最後傳給後臺值不一樣:這句話的意思是如果我選擇男女,顯示的也是男女,但是我I需要給後臺的就是id。可能男的id=0,女的id=1; 這時我們應該怎麼辦呢? 去個最基礎的例子 <div id="example-4" class="demo"&

iView預設選中問題

首先看一下iView中單選框的事例: <template> <RadioGroup v-model="phone"> <Radio label="apple"> <Icon type="logo

WPF 自定義CheckBox邊框的大小,設定打鉤隨邊框大小而自動伸縮功能,利用IsChecked選中後可是打鉤。

原始碼 <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> <Setter Property="SnapsToDevicePixels" Value="true" /&g

vueselect的使用以及select設定預設選中

簡介 今天寫pc端引入vue,遇到了一個問題,就是我迴圈出select內的資料以後,發現原本預設顯示第一條的select框變成了空白,要選擇後才有顯示,結果查了好多文件,講的都不是很清楚,後來看到一句提示,試了一下發現居然還有這種隱藏屬性。所以,我決定自己寫下來,講清楚。