console 命令行工具 X clear

console

Vue.component('my-component',{        
  template:'<div>a custom component!</div>'
})

new Vue({
  el:"#example6",
  data:{
    total:0,
    list:[{
      "name":"1",
      "month":1
    },{
      "name":"11",
      "month":1
    },{
      "name":"2",
      "month":2
    },{
      "name":"2",
      "month":3
    }]
  },
  methods:{
    incrementTotal:function(){
      this.total+=1
    }
  }
})

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
</head>
<body>
  <div id ="example6">
    <dev v-for="(value,i) in list" v-bind:key=value.name>
      <dev v-if="i == 0">
        <dev class=dev1>
          {{value.month}}月
        </dev>
      </dev>
      <dev v-else-if="i > 0 && list[i-1].month!= value.month">
        <p class=dev2>
          {{value.month}}月
        </p>
      </dev>
      <p>
        正式列表数据{{value}}
      </p>
    </dev>
  </div>
</body>
</html>

.dev1{
  color:red
}
.dev2{
  color:#85c440
}

本项目引用的自定义外部资源

vue.js