Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.1/vue.js"></script>
  
</head>
<body>
  <div id="app"></div>
</body>
</html>
 
var MyInput = {
  data() {
    return {
      currentValue: ''
    }
  },
  props: {
    value: [String, Number]
  },
  template: `<div><input type="text" v-model="currentValue"></input></div>`,
  watch: {
    'value': {
      handler(val) {
        this.currentValue = val
      }
    },
​
    'currentValue'(val) {
      this.$emit('input', val)
    }
  }
}
​
var CheckboxGroup = {
  template: `<div><slot><slot></div>`,
  props: {
    region: {}
  },
​
  watch: {
    region(value) {
      alert('checkboxGroup value change!');
    }
  }
}
​
var App = Vue.extend({
  components: { MyInput, CheckboxGroup }
})
​
new App({
  el: '#app',
  data() {
    return {
      region: [],
      name: ''
    }
  },
  template: `
    <form>
      <my-input v-model="name"></my-input>
      <checkbox-group :region="region">
        a<input type="checkbox">
        b<input type="checkbox">
      </checkbox-group>
    </form>
  `
})
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
baiyaaaaapro
0viewers