Vue.js数据驱动的简单例子-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue.js demo</title>
  <style>
    table{
      width: 100%;
      border:1px solid #ccc;
      border-collapse: collapse;
      border-spacing: 0;
      text-align: center;
    }
    td{
      border:1px solid #ccc;
    }
    .opt-bar{
      padding: 1em 0;
      text-align: center;
    }
    .opt-bar button{
      margin: 0 1em;
    }
  </style>
</head>
<body>
  <div id="app">
    <table>
      <tr v-for="item in listData">
        <td>{{item.user}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
    <div class="opt-bar">
      <button @click="delLastOne">删除一条</button>
      <button @click="addOne">添加一条</button>
    </div>
  </div>
</body>
<script src="http://cdn.bootcss.com/vue/2.0.5/vue.min.js"></script>
<script>
  (function(){
    var vm = new Vue({
      el : "#app",
      data:{
        listData : [
          {
            user : 'Cary',
            sex  : 'male',
            age  :  '21'
          },{
            user : 'Shelly',
            sex  : 'female',
            age  :  '18'
          },{
            user : 'Ava',
            sex  : 'female',
            age  :  '28'
          }
        ]
      },
      methods:{
        //删除添加就是数组或对象的添加或删除，记住”数据驱动“
        delLastOne:function(){
          this.listData = this.listData.slice(1);
        },
        addOne : function(){
          this.listData.push({
            user : 'Eywa',
            sex  : 'female',
            age  :  '24'
          });
        }
      }
    });
  })();
</script>
</html>

转载于:https://my.oschina.net/momomo1987/blog/787444