2018-09-17

作者: 慎独_AB | 来源:发表于2018-09-18 15:27 被阅读0次

素言
2018-09-18
时间组件
7天6晚，邂逅马来西亚的悠闲
【Google Arts & Culture】2018-09-2
灵隐寺一幅对联，点醒多少世人！
关于文学考研的若干建议！
刀剑大作战通关全角色微信小游戏
20180923周检视
2018-09-21

1,过滤器
过滤器：让要显示在页面上的内容进行重新筛选
过滤器分为：全局过滤器和局部过滤器，两种，且两种写法不同
局部过滤器：在Javascript内部写,然后在需要使用过滤器的地方写
‘|’

      <html>
          <p>{{msg|过滤器的名字}}</p>
          new Vue({
          })
         格式：
          js
          html


js:
Vue.filter('过滤器的名字'，function(){

})

全局过滤器：

new Vue({
    el:''
    data:{}
    methods:{},
    filters:{
       过滤器名：function（data）{
    
        }
})

使用过滤器让个位数前加0

        <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='itany'>
       <p>{{2|addZero}}</p>  
   </div>
    <script src='js/vue.js'></script>
    <script>
       Vue.filter('addZero',function(data){
           if(data<10){
               return '0'+data;
           }else{
               return data;
           }
   }) 
   new Vue({
       el:'#itany'
   })

</script>
</body>
</html>

使用过滤器保留自然数小数点后两位：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='itany'>
       <p>{{123.41233|number}}</p>
   </div>
    <script src='js/vue.js'></script>
    <script>
//       Vue.filter("number",function(data){
//           return data.toFixed(2)
//       }) 
         new Vue({
            el:'#itany',
            filters:{
                number:function(data){
           return data.toFixed(2)
                  }
        }
   })
    </script>
  </body>
  </html>

使用过滤器获取当前日期
格式为2018年9月18日,星期2,14点18分44秒

    <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
  <body>
  <div id='itany'>
      <p>{{new Date()|date}}</p>
  </div>
   <script src='js/vue.js'></script> 
   <script>
     Vue.filter("date",function(data){
           return  data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
     })  
     new Vue({
         el:'#itany'  
     })
   </script>
</body>
</html>

2，Vue.js 计算属性

计算属性关键词: computed。

练习；

  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='itany'>
       <h1>{{msg.split(' ').reverse().join('===')}}</h1>
       <a href="#">{{count}}</a>
   </div>
    <script src='js/vue.js'></script>
    <script>
    
       new Vue({
           el:'#itany',
           data:{
               msg:'hello vue'
           },
           computed:{//计算属性
               count:function(){
               return this.msg.split(' ').reverse().join('===')
           }
       }
   })
    </script>
</body>
</html>

加货练习

  <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id='itany'>
     <button @click='add'>加货</button>
      <h1>{{total}}</h1>
  </div>
   <script src='js/vue.js'></script> 
   <script>

       new Vue({
           el:'#itany',
           data:{
               package1:{price:2,count:3},
               package2:{price:4,count:6}
           },
               computed:{
               total:function(){
                   return           
                      
      
   this.package1.price*this.package1.count+this.package2.price*this.package2.count
           }
       },
           methods:{
               add:function(){
                   this.package1.count++;
           }
           }
       
     })
    </script>
</body>
</html>