elementUI怎么点击一个单选框，让input隐藏？

Question

怎么点击团体的时候让input 显示，点击个人input隐藏，（并且怎么获取input输入的值）

 <el-radio-group v-model="ruleForm.nature" :change="change">
       <el-radio label="个人" ></el-radio>
       <el-radio label="团体"></el-radio>
       <el-input></el-input>
 </el-radio-group>

Answer 1

谢邀~

// html
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//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">个人</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("//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文档。

结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。
我是用elementUI文档上的案例写的。翻墙后可以正常访问。

Answer 2

change事件通过id判断 或者通过文字判断 显示 或者隐藏