组件使用

<!doctype html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-demo</title>
  <script type="text/javascript" src='./vue.min.js'></script>
  <style>
    .big{
        font-size: 26px;
    }
  </style>
</head>
<body>
  <div id="temp-div">
      <!-- 这个demo标签是一个自定义函数 -->
  <demo :data='users'></demo>
  <!-- 这里四:data就是user -->
</div>
<!-- 看好这个script是个模板函数 type不是javascript而是 type="text/x-template" -->
    <script type="text/x-template" id="div-template">
        <ul>
            <li v-for='item in data'>
                <p >时间  {{item.time|time}}</p>
                <p >名称  {{item.name}}</p>
                <p >钱   <em class="big">{{(item.mony-0).toFixed(2).split('.')[0]}}</em> <em>{{(item.mony-0).toFixed(2).split('.')[1]}}</em></p>            
            </li>
          </ul>
            <span v-bind:title="message">
                Hover your mouse over me for a few seconds to see my dynamically bound title!
           </span>
    </script>
    <script>
    /*先创建一个组件,*/
      Vue.component('demo', {
          template:'#div-template',
          replace:true,
          props:{
              data: Array
          },
        filters:{
            time:function  (val) {
                var t=new Date(val);
                //return t.getFullYear()+"年"+(t.getMonth()+1)+"月"+t.getDate()+'日';//这个是2016年11月23日
                return t.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ").split(' ')[0];//这个是2016/11/23
            }
        }
      });
      var vm=new Vue({
        el:'#temp-div',
        data:{
            users:[],//可以先声明出来,
            message: 'You loaded this page on ' + new Date()
        }
      });
      /*这里是模仿请求数据,我是写的延时赋值*/
      setTimeout(function(){
          /*赋值数据给vm.users即可,请求成功后赋值*/
          vm.users=[
            {time:1479910466000,name:'张三',mony:'1.21'},
            {time:1479910466000,name:'李四',mony:'1.1'},
            {time:1479910466000,name:'王五',mony:'100.01'}]
      },2000)
    </script>
</body>

</html>


普通的数据加载(弊端:数据加载过多或者网速过慢页面会出现花括号;使用组件的形式完美的避免了这种情况)

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-demo</title>
  <script type="text/javascript" src='./vue.min.js'></script>
  <style>
    .big{
        font-size: 26px;
    }
  </style>
</head>
<body>
  <div id="temp-div">
        <ul>
            <li v-for='item in users'>
                <p >时间  {{item.time|time}}</p>
                <p >名称  {{item.name}}</p>
                <p >钱   <em class="big">{{(item.mony-0).toFixed(2).split('.')[0]}}</em> <em>{{(item.mony-0).toFixed(2).split('.')[1]}}</em></p>            
            </li>
          </ul>
 </div>
    <script>
      var vm=new Vue({
        el:'#temp-div',
        data:{
            users:[],//可以先声明出来,
            message: 'You loaded this page on ' + new Date()
        },
         filters:{
            time:function  (val) {
                var t=new Date(val);
                //return t.getFullYear()+"年"+(t.getMonth()+1)+"月"+t.getDate()+'日';//这个是2016年11月23日
                return t.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ").split(' ')[0];//这个是2016/11/23
            }
        }
      });
      /*这里是模仿请求数据,我是写的延时赋值*/
      setTimeout(function(){
          /*赋值数据给vm.users即可,请求成功后赋值*/
          vm.users=[
            {time:1479910466000,name:'张三',mony:'1.21'},
            {time:1479910466000,name:'李四',mony:'1.1'},
            {time:1479910466000,name:'王五',mony:'100.01'}]
      },2000)
    </script>
</body>
</html>

Logo

前往低代码交流专区

更多推荐