vue方法整理

Vue的核心是数据与视图的双向绑定：
一、会改变调用的原始数组的方法：
（1）、push()
（2）、pop()
（3）、shift()
（4）、unshift()
（5）、sort()
（6）、reverse() 把数据反过来

<template>
  <div id="lmz">{
   {
   reversedText}}</div>
</template>
<script>
export default {
   
  data () {
   
    return {
   text: '123,456'}
  },
  computed: {
   	//456.123
    reversedText: function () {
   
      return this.text.split(',').reverse().join('.')
    }
  }
}
</script>

二、不会改变原始数组的方法：
（1）、filter()： 全局注册时是filter，没有s的。而组件过滤器是filters，是有s的
全局过滤器：Vue.filter(‘globalFilter’, function(value){ return value+ ‘~’ })
组件过滤器： filters: { componentFilter: function(value){ return value+’~’ } }
{ {message | filterA | filterB}}：message是作为参数传给filterA函数，而filterA函数的返回值作为参数传给filterB函数，最终结果显示有filterB返回的

<template>
  <div>{
   {
   '2020' | filterA | filterB}}</div>
</template>
<script>
export default {
   
  filters: {
   	//2020年 Hi
    filterA: function (value) {
   return value + '年  '},
    filterB: function (value) {
   return value + 'Hi'}
  }
}
</script>

（2）、concat()
（3）、slice()

三、当不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组

<template>
  <div>
    <ul @click="fnCon()">
      <template v-for="(book, index) in filterBooks">
        <li :key="`name${index}`">书名：{
   {
   book.name}}</li>
        <li :key="`author${index}`">作者：{
   {
   book.author}}</li>
      </template>
    </ul>
  </div>
</template>
<script>
// 把书名中包含vus.js关键字的数据过滤出来，计算属性filtersBook依赖books,但是不会修改books
export default {
   
  data () {
   
    return {
   
      books: [{
   name: 'vue.js实战', author: '一个周'}, {
   name: 'vue.js实战进阶', author: '二个周'}, {
   name: 'vue.js实战高阶版', author: '三个周'}, {
   name: 'CSS实战', author: '四个周'}, {
   name: 'Vue.js备战', author: '五个周'}, {
   name: 'vue.js基础', author: '六个周'}]
    }
  },
  computed: {
   
    filterBooks: function () {
   
      return this.books.filter(function (vm) {
   
        return vm.name.toString().toLowerCase().match(/vue.js/)
      })
    }