控件绑定 vue-model 指令

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选

 

取正确的方法来更新元素。适用于文本，多行文本，复选框，单选列表等。

demo:

<div id="container">
  <button @click="clickMe()">{{defaultButton}}</button>
  <!-- 如果 v-show = true 的话就会显示 此 div  -->
  <div v-show="flag" id="showDiv">
    <span>我是 v-show</span>
  </div>
  <button @click="change()">改变文本的值</button>
  <input type="text" v-model="itext" class="myinput"> <br/>
  你输入的值是：<font class="myfont">{{itext}}</font>
</<script>
  var vm = new Vue({
    el:'#container',
    data:{
      // 是否显示 div 的标志，默认是不显示
      flag:false,
      // 默认按钮显示字样
      defaultButton:'显示',
      itext: ''
    },
    methods:{
      // 按钮点击的方法
      clickMe(){
        if(this.defaultButton == "显示"){
          this.defaultButton ="隐藏"
        }else{
          this.defaultButton ="显示"
        }
        this.flag = !this.flag
      },
      change() {
        this.itext = "TigerChain"
      }
    }
  })
</script>div>