国产精品天干天干天干,最新国产精品拍自在线播放,亚洲国产毛片aaaaa无费看

最近學(xué)習(xí)了Vue前端框架，在這里記錄一下組件的用法，我自己試著寫了一個(gè)評論的組件，大神看到勿噴，歡迎提出寶貴意見。
首先看一下效果圖
用到的文件有：
demo下載地址：https://download.csdn.net/download/qingchundaima/10842714
話不多說直接上代碼，基本注釋我都寫全了，這里我沒有將js和html文件分開直接在html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../js/bootstrap/dist/css/bootstrap.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="../js/Ionicons/css/ionicons.min.css">
  <!-- jQuery 3 -->
  <script src="../js/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap 3.3.7 -->
  <script src="../js/bootstrap/dist/js/bootstrap.min.js"></script>
  <!-- vue -->
  <script src="../js/vue.js"></script>
  <style>
    [v-cloak] {
      display: none
    } 
     .tb_comment{
      width: 100%;
      /* border: 1px solid; */
    }
    .tb_comment img{
       width:64px;
       height:64px;
    }
    .tb_user{
      width: 80px;
    }
 
 
         /* 用戶評論內(nèi)容展示 */
      .div_comment_content{
        padding: 6px 12px;  
        border: 1px solid #d2d6de;
        background-color: #f0f8ff;
      }
   
  </style>


</head>

<body>
  <div class="row" id="app" v-cloak>
    <div class='row'>
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <!-- comment_item:傳遞給子組件數(shù)據(jù)  comment_data：父組件里定義的數(shù)據(jù) -->
        <!-- id子父組件里我都定義成id----當(dāng)前評論資源id -->
        <!-- prentsendcomment：在子組件里調(diào)用父組件發(fā)表方法的名稱 sendcomment：父組件里發(fā)表方法 -->
        <!-- prentsendsupport:子組件里調(diào)用父組件點(diǎn)贊方法名稱  sendsupport：父組件里點(diǎn)贊方法 -->
        <!-- prentsendopposition：子組件里調(diào)用父組件反對方法名稱  sendopposition：父組件里反對方法 -->
        <temp_comment v-bind:comment_item="comment_data" v-bind:id="id" @prentsendcomment="sendcomment"
          @prentsendsupport="sendsupport" @prentsendopposition="sendopposition">
        </temp_comment>

      </div>
      <div class="col-md-3"></div>

    </div>
  </div>

  <!-- 評論組件html代碼結(jié)構(gòu) -->
  <template id='tp_comment'>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">歡迎您發(fā)表評論</h3>
      </div>
      <div class="panel-body form-check-inline">
        <label style="color:gray">請勿發(fā)表與本片無關(guān)的主題，評論需要審核</label>
        <textarea class="form-control" style="resize:none;" rows="5" placeholder="說點(diǎn)什么吧..." maxlength="20" v-model="input_comment"> </textarea>
        <span class="pull-right">還能輸入<b style="color:red">{{surplus}}</b>/{{total}}</span><br>
        <input type="button" class="pull-right btn btn-primary" value="發(fā)表" @click="btnsend">
        <div v-for="item in comment_item" :key="item.Id">
          <table class="tb_comment table table-condensed">
            <tbody>
              <tr>
                <td class="tb_user">
                  <img class="img-circle" v-bind:src="item.PortraitUrl">
                </td>
                <td>
                  <p>{{item.NickName}}   <i class="glyphicon glyphicon-time"></i> {{item.CreateTime|date}}
                    <span class="pull-right">
                      <a href="#" @click.prevent="btnsupport(item.Id)"> <i class="    glyphicon glyphicon-thumbs-up"></i> ({{item.SupportNum}})</a>
                        
                      <a href="#" @click.prevent="btnopposition(item.Id)"><i class="    glyphicon glyphicon-thumbs-down"></i> ({{item.OppositionNum}})</a>
                    </span>
                  </p>
                  <div class='div_comment_content'>
                    {{item.CommentContent}}
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <table class="tb_comment table table-condensed" v-if="comment_item.length==0">
          <tbody>
            <tr>
              <td class="text-muted" style="width:100%">
                <h4>暫無評論...</h4>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>

  <script>
    window.onload = function (ev) {
      // 定義評論組件
      var temp_comment = {
        template: '#tp_comment',
        // 組件里的數(shù)據(jù)必須是方法返回。
        data: function () {
          return {
            input_comment: '',// 輸入的評論 
            total: 200,// 評論可輸入總字?jǐn)?shù) 
          }
        },
        // 父組件傳遞的消息列表
        props: ['comment_item', 'id'],
        // 計(jì)算屬性
        computed: { // 計(jì)算剩余可輸入字?jǐn)?shù)
          surplus: function () {
            return this.total - this.input_comment.length;
          },
        },
        // 自定義過濾器
        filters: {
          // 時(shí)間過濾器
          "date": function (d) {
            var newdate = new Date(d);
            y = newdate.getFullYear();
            m = (newdate.getMonth() + 1).toString().padStart(2, '0');
            d = newdate.getDay().toString().padStart(2, '0');
            hh = newdate.getHours().toString().padStart(2, '0');
            mm = newdate.getMinutes().toString().padStart(2, '0');
            ss = newdate.getSeconds().toString().padStart(2, '0');
            return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
          }
        },
        // 方法
        methods: {
          // 父組件傳入的發(fā)表評論方法，由子組件調(diào)用父組件發(fā)表評論方法
          btnsend: function () {
            // 調(diào)用父組件方法。
            this.$emit('prentsendcomment', this.id, this.input_comment)
          },
          // 評論點(diǎn)贊
          btnsupport: function (id) {
            // 調(diào)用父組件方法。
            this.$emit('prentsendsupport', id)
          },
          // 評論反對
          btnopposition: function (id) {
            // 調(diào)用父組件方法。
            this.$emit('prentsendopposition', id)
          }
        }
      }

      var vm = new Vue({
        el: '#app',
        data: {
          id: 12,
          // 測試數(shù)據(jù)
          comment_data: [
            {
              Id: 1,
              PortraitUrl: "../images/user2-160x160.jpg",
              NickName: '那年初夏',
              CommentContent: '勸君更敬一杯酒',
              SupportNum: 14,
              OppositionNum: 323,
              CreateTime: new Date()
            },
            {
              Id: 2,
              PortraitUrl: "../images/user2-160x160.jpg",
              NickName: '列夫托爾斯泰',
              CommentContent: '這個(gè)部電影指的我們?nèi)ズ煤每纯础?/span>',
              SupportNum: 2312,
              OppositionNum: 33,
              CreateTime: new Date()
            },
            {
              Id: 3,
              PortraitUrl: "../images/user2-160x160.jpg",
              NickName: '小怪獸',
              CommentContent: '千萬不要下載，千萬不要下載，千萬不要下載，我活了34年，這種爛片，第一次見難道比純潔心靈還要爛》？',
              SupportNum: 23,
              OppositionNum: 43,
              CreateTime: new Date()
            },
            {
              Id: 4,
              PortraitUrl: "../images/user2-160x160.jpg",
              NickName: '帥大叔',
              CommentContent: '到菜市場買菜，看到一個(gè)孩子在看攤，我問：“一只雞多少錢？” 那孩子回答：“23?！?我又問：“兩只雞多少錢？” 孩子愣了一下，一時(shí)間沒算過來，急中生智大吼一聲：“一次只能買一只！”',
              SupportNum: 56,
              OppositionNum: 55,
              CreateTime: new Date()
            },
            {
              Id: 5,
              PortraitUrl: "../images/user2-160x160.jpg",
              NickName: '夏末',
              CommentContent: '版權(quán)歸作者所有，任何形式轉(zhuǎn)載請聯(lián)系作者。作者：電影幕后故事（來自豆瓣）來源：https://movie.douban.com/review/9666136/郭敬明當(dāng)作家遠(yuǎn)不如當(dāng)商人成功。當(dāng)作家寫出來的那些不知所云、虛到不行的句子只能騙一騙心智不成熟的小孩子；但做商人時(shí)所展現(xiàn)出來的精明與虛偽倒是能騙過不少人。我指的就這部披著“反校園霸凌”外衣，實(shí)則還是矯情、無病呻吟的電影。',
              SupportNum: 78,
              OppositionNum: 23,
              CreateTime: new Date()
            },
            {
              Id: 6,
              PortraitUrl: "../images/user2-160x160.jpg",
              NickName: '羅罔極',
              CommentContent: '前陣子，我犯了個(gè)錯(cuò)。 我在文章里說，當(dāng)下的大陸喜劇，有兩大派系分庭抗禮。 一派是徐崢寧浩，其作品核心偏于人間悲劇； 一派是開心麻花，其作品核心偏于純粹喜劇。 沒想到，現(xiàn)在又殺出個(gè)程咬金。 八年醞釀，慢工打磨。 導(dǎo)演、編劇：黃渤。 這一出手，就震驚四座—— 《一出好... ',
              SupportNum: 332,
              OppositionNum: 33,
              CreateTime: new Date()
            },
          ]
        },
        // 注冊組件
        components: {
          'temp_comment': temp_comment,
        },
        // 方法
        methods: {
          getdata: function () {
            var list = JSON.parse(localStorage.getItem('cmts') || '[]')
            this.list = list;
          },
          // 由子組件調(diào)用后傳入評論資源的id和內(nèi)容
          sendcomment: function (id, content) {
            alert(id + '------' + content)
          },
          // 子組件觸發(fā)點(diǎn)贊
          sendsupport: function (id) {
            alert(id)
          },
          // 子組件觸發(fā)反對
          sendopposition: function (id) {
            alert(id)
          }
        },

        beforeCreate() {
          // 這時(shí)候data 和methods 都還沒有被初始化，所以訪問不到getdata
        },
        created() {
          this.getdata();
        }
      })

    };
  </script>
</body>

</html>
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。
免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版
