夜光带你走进Vue.js（九）擅长的领域

夜光序言：

 

 

说来也是奇怪，自此，我总能在任何地方见到任何状态的你，除了归结为神的指引，我竟再找不出一个足以说服自己的理由。
这个世界上的人如此之多，可偏偏，我们遇到了。

 

 

 

 

 

 

 

 

 

 

正文：

split('') 是分裂的意思，也就是把一个数据拆分。

var vm = new Vue({
    date:{
        message=" Not split "
    }
 )}

message.split('') == [ "N", "o", "t", " ", "s", "p", "l", "i", "t" ]

split('') 会把数据拆分为一个数组，括号里的 '' 是把数据拆分为每个字符串的意思，如果不用就不会拆分成每个字符串。

reverse() 是翻转的意思，把数据反过来。

message.reverse() == Not split   // 无效，因为只能对数组起作用

所以要跟在 split('') 后使用。

join('') 是重组的意思，把数组合成一个字符串。 

message.split('').join('')

slpit 后会拆散会数组，join 后就会变回原来的字符串了。

所以我们要把数据反过来重组就可以用：

message.split('').reverse( ).join('')

---

 

 

针对表达式的应用和多个属性参数的使用：

<template>
  <div id="app">
    {{ message | capitalize('!',label,1<2?true:false) | capitalize2}}
  </div>
</template>
<script>
  export default{
    data(){
      return{
        message: 'yeguang',
        label:'———'
      }
    },
  filters: {
    capitalize: function (value,value2,value3,value4) {
      if (!value) return '';
      value = value.toString();
      console.log('capitalize1调用');
      return value.charAt(0).toUpperCase() + value.slice(1)+value2+value3+value4;
    },
    capitalize2: function (value) {
      if (!value) return '';
      value = value.toString();
      console.log('capitalize2调用');
      return value.charAt(0)+value.charAt(1).toUpperCase() + value.slice(2);
    }
  }
  }
</script>
<style>

</style>