vue checkbox與readonly控制小範例

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js">
</script>

<div id="app">
 【按下按鈕並勾選，即可輸入資料】
  <button type="button" v-on:click="changemode">
  ChangeMode
  </button><br/>  
  <input type="checkbox" v-show="addmode" id="ipspecial" v-model="specialcode">
  <label for="ipspecial" v-show="addmode">特定編號</label>
  <br/>
  <input type="text" v-bind:readonly="!specialcode" v-model="no"/> - 
  <input type="text" v-bind:readonly="!specialcode" v-model="no1"/>
  <br/>
  <br/>
  {{specialcode}}<br/>

</div>

JavaScript

var app = new Vue({
  el: "#app",
  data: {
    specialcode: false,
    addmode: false ,
    no:"",
    no1:""
  },
  watch:{
  	specialcode: function(value){
    	if(value){      	
      }
      else{
      	this.no = "";
        this.no1 = "";
      }
    }
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
    changemode: function(){
    	this.addmode = !this.addmode;
    }
  }
})