vue:component練習

by cactus77kiki

HTML

<!--try:vue component-->
<div id="pager1">  
  <paging-ele     
    v-bind:number="pages"
    v-bind:message="msg" 
    v-bind:name="oname"
    v-bind:enableleft = "EnableLeft"
    v-bind:enableright = "EnableRight"
    v-bind:leftelli = "LeftElli"
    v-bind:rightelli = "RightElli"
  >    
  </paging-ele>   
  
</div>

<hr/>
<div id="pager2">
  <paging-ele2 
   v-for="p in pages"
   v-bind:number="p.num"
   v-bind:key="p.id"
   >    
  </paging-ele2>
</div>

<!--
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

CSS

.btndisabled{
  display:none;
}

JavaScript

Vue.component('paging-ele',{
  props:
    [
     'number','message','name',
     'enableleft','enableright','leftelli','rightelli'
    ],
  template:
    `<div>
       <div>{{ message }}</div>
       <li v-bind:class="[enableleft ? '' : 'btndisabled']">
          <a href="#" title="第一頁">
          <i class="fa fa-angle-double-left"></i>
          </a>
       </li>
       <li v-bind:class="[enableleft ? '' : 'btndisabled']">
          <a href="#" title="上一頁">
          <i class="fa fa-angle-left" ></i>
          </a>
       </li>
       <li>
          <a href="#" v-show="leftelli" title="更多...">
          ...
          </a>
       </li>
       <li v-for="p in number" @click="getme(p.num)">
          <a href="#">{{p.num}}</a>
       </li>
       <li>
          <a href="#" v-show="rightelli" title="更多...">
          ...
          </a>
       </li>
       <li v-bind:class="[enableright ? '' : 'btndisabled']">
          <a href="#" title="下一頁">
          <i class="fa fa-angle-right"></i>
          </a>
       </li>
       <li v-bind:class="[enableright ? '' : 'btndisabled']">
          <a href="#" title="最末頁">
          <i class="fa fa-angle-double-right" ></i>
          </a>
       </li>
       <button @click="talk(name)">Talk Talk</button><br/>
       <button type="button" @click="getCurrentPage">按我就知道剛剛你點哪台機器</button>
    </div>`,
  methods: {
    talk: function(name) {
      alert('Hi ' + name);
    },
    getme: function(t){      
      this.clickeditem = t;      
    	alert('you clicked: '+t);
    },
    getCurrentPage: function(){
      if(this.clickeditem==='')
      	 alert('您還沒有點選資料');
      else
    		alert(this.clickeditem);
    }
  },
  data:
    function() {
        return {
						clickeditem: ''
        }
    }        
})


Vue.component('paging-ele2', {
  props: ['number'],
  template: '<div><li>{{ number }}</li></div>'
})

var vm = new Vue({
  el:"#pager1",
  data:{
    EnableLeft:false,
    EnableRight:true,
    LeftElli:false,
    RightElli:true,
 ...