elementUI怎么點(diǎn)擊一個(gè)單選框，讓input隱藏？

怎么點(diǎn)擊團(tuán)體的時(shí)候讓input 顯示，點(diǎn)擊個(gè)人input隱藏，（并且怎么獲取input輸入的值）

 <el-radio-group v-model="ruleForm.nature" :change="change">
       <el-radio label="個(gè)人" ></el-radio>
       <el-radio label="團(tuán)體"></el-radio>
       <el-input></el-input>
 </el-radio-group>

回答

編輯回答

撥弦

change事件通過(guò)id判斷或者通過(guò)文字判斷顯示或者隱藏

2017年7月11日 06:01

編輯回答

伴謊

謝邀~

// html
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@2.4.1/lib/index.js"></script>
<div id="app">
<template>
  <el-radio-group v-model="radio2" @change="change">
    <el-radio :label="1">個(gè)人</el-radio>
    <el-radio :label="2">組織</el-radio>
    <el-input v-model="inputValue" v-if="radio2 !== 1"></el-input>
  </el-radio-group>
</template>
</div>

// css
@import url("http://unpkg.com/element-ui@2.4.1/lib/theme-chalk/index.css");

// JS
var Main = {
    data () {
      return {
        radio2: 1,
        inputValue: '軒轅Rowboat'
      };
    },
    methods: {
        change(val){
          console.log(val, 'val');
        console.log(this.inputValue, 'input的值');
      },
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

有空多看看vue文檔-表單輸入綁定，和elementUI文檔。

結(jié)合el-radio-group元素和子元素el-radio可以實(shí)現(xiàn)單選組，在el-radio-group中綁定v-model，在el-radio中設(shè)置好label即可，無(wú)需再給每一個(gè)el-radio綁定變量，另外，還提供了change事件來(lái)響應(yīng)變化，它會(huì)傳入一個(gè)參數(shù)value。
我是用elementUI文檔上的案例寫(xiě)的。翻墻后可以正常訪問(wèn)。

2017年7月15日 04:47