记录vue的一些应用

1.v-for渲染菜单列表，点击某一项菜单改变颜色

html:

<dl class="filter-price">
  <dt>Price:</dt>
   <dd><a href="javascript:void(0)" @click="setPriceFilter('all')" v-bind:class="{'cur':priceChecked=='all'}">All</a></dd>
   <dd v-for="(price,index) in priceFilter">
     <a href="javascript:void(0)" @click="setPriceFilter(index)" v-bind:class="{'cur':priceChecked==index}">{{price.startPrice}} - {{price.endPrice}}</a>
   </dd>         
 </dl>

js:

data () {
      return {
		priceFilter:[
		    {
		   	 	startPrice:'0.00',
		       	endPrice:'500.00'
		    },
		    {
		     	startPrice:'500.00',
		     	endPrice:'1000.00'
		    },
		    {
		     	startPrice:'1000.00',
		     	endPrice:'2000.00'
		    }
		 ],
		 priceChecked:'all'
	 }
}，
methods:{
      setPriceFilter(index){
        this.priceChecked = index;
      }
}

css:

<style>
.cur{
	color:#ee7a23;
	font-weight: bold;
}
</style>

2在vue组件中引用外部样式

<script>
  //引入样式
  import '../assets/css/base.css'
  import '../assets/css/product.css'
  export default {
  
  }
 </script>

3滚动条滚动加载效果

https://www.npmjs.com/package/vue-infinite-scroll

1、安装vue-infinite-scroll模块：
|npm install vue-infinite-scroll --save

2、在main.js中引入

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

3.html

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>

js

var count = 0;
 
new Vue({
  el: '#app',
  data: {
    data: [],
    busy: false
  },
  methods: {
    loadMore: function() {
      this.busy = true;
 
      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
});