JSFiddle - React, Tailwind, and code Playground

by lu wei

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-button @click="editAll">编辑</el-button>
<el-button @click="disableAll">禁止</el-button>
<el-input placeholder="请输入内容" v-model="input1" :disabled="edit"></el-input>
<el-input placeholder="请输入内容" v-model="input2" :disabled="edit"></el-input>
<el-input placeholder="请输入内容" v-model="input3" :disabled="edit">
</el-input>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

Babel + JSX

var Main = {
  data() {
    return {
      input1: '',
			input2: '',
			input3: '',
			edit: true
    }
  },
	methods: {
		editAll () {
			this.edit = false
		},
		disableAll () {
			this.edit = true
		}
	}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')