SOURCE

new Vue({
  el:"#app",
  data:{
    items:[
      {message:"foo"},
      {message:"bar"}
    ],
   count:0,
    map:{
      num:1
    },
    list:[1,2,3,4,5],
    text:'',
    height:50,
    padding:50,
    display:'',
    bgcolor:'',
    
  },
  methods:{
    counts:function(e){
      console.log(e);
      this.count++;
    },
    del:function(){
      this.num=null;
    },
    edit:function(){
      this.list.splice(0,1,100);
     // this.list.reverse();
    }
  }
});

<div id="app">
  <!--  <ul id="e1">
      <li v-for="item in items">
        {{item.message}}
      </li>
    </ul> 
  <p>{{count}}</p>
  <button @click="counts">累加</button>
  <p v-if="null===map.num">{{map.num}}</p>
  <button @click="del">删除</button>
  <hr>
  <table>
    
    <tr v-for="tr in list" :key="tr">
      <td>{{tr}}</td>
    </tr>

  </table>
<button @click="edit">加100</button>
  <hr>
  <input type="text" v-model="text"  placeholder="edit">
  <p>text='{{text}}'</p>
  <textarea v-model="text"></textarea>-->
  <hr>
  <!---->
  
   <input type="text" v-model="height"  placeholder="edit">
  <textarea v-model="height" ></textarea>
  <label><input type="checkbox" id="checkbox"  v-model="padding"/>内边距</label>
  <label><input type="radio" v-model="display">显示</label>
  <label><input type="radio" v-model="display">不显示</label>
  <select v-model="bgcolor">
    <option>red</option>
    <option>yellow</option>
    <option>blue</option>
  </select>
  <div v-bind:style="{height:height+'px',padding:padding+'px','background-color':bgcolor}" style="border:1px solid #000 ;" > aaa
  </div>
</div>