1. 程式人生 > >vue.js中關於下拉框的值預設及繫結問題

vue.js中關於下拉框的值預設及繫結問題

一、今天遇到vue中下拉框問題,故而寫點東西留個腳印

<template>

  <select v-model='selected' @click="disable()">
    <option v-for="(option,index) in options" v-bind:value="option.value" :disabled="option.disabled">
      {{ option.text }}{{index}}{{option.disabled}}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</template>
<script>
  export default{
    name: 'second',
    data(){
      return {
        selected: 'sex',   // 這裡選擇預設項
        options: [
          {text: '點選選擇性別', value: 'sex', disabled: ''},
          {text: '男', value: '1'},
          {text: '女', value: '2'}
        ]
      }
    },
    methods: {
      disable: function () {
        this.options[0].disabled = disabled;
      },
    }
  }
</script>

相關推薦

vue.js中關於下預設問題

一、今天遇到vue中下拉框問題,故而寫點東西留個腳印 <template>   <select v-model='selected' @click="disable()">     <option v-for="(option,index) i

vue獲取下

聲明 for 下拉 targe 賦值 bin 方式 div 解決 vue獲取下拉框的值,用vue-modle,只有點擊下拉框的值才會賦值到下拉框中,初始時下拉框沒有數據,而改用$event就不會出現這樣的問題,下面看代碼以及圖解: v-model解決方式: <!--

vue.js選擇,修改時顯示已有的選擇資訊

<div class="form-group"> <div class="col-sm-2 control-label">APPID</div> <div class="col-sm-10"> <s

MVC4 ,編輯時

後臺: public ActionResult Modify(int id) { //3.1.1 檢查id //3.1.2根據id查詢資料 Models.Student stu = (from s

VUE.JS 使用axios資料請求時資料時 報錯 TypeError: Cannot set property 'xxxx' of undefined 的解決辦法

正常情況下在data裡面都有做了定義 在函式裡面進行賦值 這時候你執行時會發現,資料可以請求到,但是會報錯 TypeError: Cannot set property 'listgroup' of undefined  主要原因是: 在 then的內部不能使用Vue的例項

Vue.js學習筆記】6:動態CSS樣式,條件渲染和v-show

動態繫結CSS樣式 這部分涉及官方文件中的Class與Style繫結。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:

Vue.js學習筆記】3:資料,事件

資料繫結 使用Vue時在Vue物件的el欄位中要指定一下根容器,這裡用id選擇器。這個例子同時學習了data和methods的基本用法。 資料繫結(data-binding)可以將Vue物件中的data的值繫結到HTML標籤中的某些位置,則修改時只需要修改物件中相應data的值即

Atitit  專案介面h5化靜態html化計劃---vue.js 把ajax獲取到的資料 到表格控制元件 v2 r33.docx

Atitit  專案介面h5化靜態html化計劃---vue.js 把ajax獲取到的資料 繫結到表格控制元件 v2 r33.docx 3. 其他 4 1. 場景:應用在專案列表查詢場景下 全面的的使用html h5介面分離前後端,使介面可以通用與p

PHP中下預設動態選定

<select name="leixing" id="leixing" >               <option value="">選擇型別</option>               <?php                  $result_1=mys

angular.js選中 根據後臺返回

tro script rip pre 後臺 根據 length -o lec 前景,根據後臺返回值選中某個項 <!DOCTYPE html><html><head> <meta charset="utf-8"> &

angularjs中下select option默認

edt 工作 ima TP class 匯報 span 說明 pre 1.問題說明: option ng-repeat多空白項 2.解決方案: html: <ion-view hide-nav-bar="true"> <ion-content>

freemaker中下(動態下和靜態下)的塞,回顯

靜態下拉,靜態的情況下把所有靜態的可能都列出來,判斷返回的值是否等於option中的值,如果相等就顯示那行,??是判斷不為空: <label class="control-label">所在端:</label>

vue中單選設定預設選中

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

asp.net中js+jquery新增下和後臺獲取

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></title>     <script src="Scripts

[學習筆記]JS

var FrustaNumber=FrustaNumbers.split(",");if(FrustaNumber.length>0){for(var i=0;i<FrustaNumber

VUE】IView.js資料雙向

寫在前面的    在Iview.js的眾多元件中,drop selection也是使用比較頻繁的元件之一,下面就用最為簡單的方法來實現下拉框中資料的動態繫結。 Select Option

關於WebDriver中下選項操作 ---- >>Select類的使用:

ui測試 使用 images 如果 lis ima 固定 png 分享圖片   在UI測試的過程中,我們經常會遇到對下拉框的處理, 筆者在日常的維護中, 對下拉框的處理的太多, 各種好定位的不好定位的, 這裏可以分享兩種定位方法:   1.日常定位的方法每個select下

Vue.js學習】生命周期數據綁定

cli per number 變量命名 num ber 數據 bin otto 一、生命後期  官網的圖片說明: Vue的生命周期總結 var app = new Vue({   el:"#app",   beforeCreate: functi

vue.js 組件傳

lba 行程 復制 問題 hang 效果 復制代碼 技術分享 類型 vue.js 組件傳值:屬性傳值可以從父組件到子組件,也可以從子組件到父組件。 父組件到子組件的傳值   demo裏有APP.vue是父組件,Header.vue,Users.vue和Footer.vue為

angularjs中下select 第一個為空白

<label for="userId">發起培訓人</label> <select class="form-control input-sm" ng-model="trainDetail.userId" name="userId" id="