2018-09-18

1.计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='app'>
      <a href="">{{revMsg}}</a>
 
       <h1>{{msg.split(' ').reverse().join('*****')}}</h1>
       
       <!--vue===hello-->
   </div>
    <script src='js/vue.js'></script>
    <script>
    
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           methods:{},
           filters:{},
           computed:{
               revMsg:function(){
                   return this.msg.split(' ').reverse().join('&&&&&&&')
               }
           }
       })
    </script>
</body>
</html>

2.计算年月日时间的方法（包括复习前面的东西）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!--    
 指令：
    v-for=""   循环操作
    v-model=""  双向数据绑定  表单元素 
    v-on:事件='值 '      绑定事件   简写  @click=''
    v-bind:属性='值'  绑定属性   简写  :bind=''
    v-show=""        控制元素的显示或隐藏   sidplay:none;
    v-if='值'         控制元素的显示或隐藏   visibility:hidden;
    v-else-if
    v-else 

    v-text='' 
    v-html='' 识别html标签
    
    v-once   只绑定一次
    v-pre    原样输出
    
    v-cloak 
    
   过滤器：对页面上的数据进行筛选和过滤
    
       全局过滤器
          html
          <p>{{num|过滤器的名字}}</p>
          js
           Vue.filter('过滤器的名字',function(){})
       
       局部过滤器
          new Vue({
              el:'#itany',
              data:{},
              methods:{},
              filters:{
                 过滤器的名字：function(){}
              }
          })
    
    
    今天是2018年9月18日星期二，3点50分
         
-->


<script>
    var date=new Date();
    //年份
    var year=date.getFullYear();
    //月
    var mon=date.getMonth()+1;
    //日
    var ri=date.getDate();
    //星期
    var week=date.getDay();
    //时
    var hour=date.getHours();
    //分
    var min=date.getMinutes();
    //秒
    var sec=date.getSeconds();
    
    document.write(`今天是${year}年,${mon}月,${ri}日，星期${week}，${hour}点，${min}分，${sec}秒`)
</script>
</body>
</html>

3.单纯的计算两个数字的乘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='app'>
      <button @click='add'>加货</button>
       <h1>{{total}}</h1>
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               pack1:{price:5,count:3},
               pack2:{price:4,count:6}
           },
           computed:{
               total:function(){
                 return this.pack1.price*this.pack1.count+this.pack2.price*this.pack2.count
               }
           },
           methods:{
               add:function(){
                   this.pack1.count++;
               }
           }
       })
    </script>
</body>
</html>

4.num: Math.floor(Math.random()*(max-min+1)+min)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id='app'>
      <h1>{{num|addZero}}</h1>
  </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:'#app',
           data:{
//               num: Math.floor(Math.random()*(max-min+1)+min)
               num: Math.floor(Math.random()*(20-0+1)+0)
           },
           filters:{
               addZero:function(data){
               if(data<10){
                  return '0'+data;
               }else{
                   return data;
               }
         }
           }
       })
</script>
</body>
</html>

5.过渡属性2

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

过度属性3计算年月日添加

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

2018-09-18

推荐阅读更多精彩内容