十四.组件案例-评论列表
本文最后更新于 1508 天前,其中的信息可能已经有所发展或是发生改变。
<!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>评论列表</title>
  <script src="../lib/vue-2.4.0.js"></script>
  <style>
    li {
      border: 1px dashed #999;
      width: 100%;
      font-size: 18px;
    }

    li:hover {
      background-color: bisque;
      transition: all 0.5s ease;
    }

    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateY(100px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 1s ease;
    }
  </style>
</head>

<body>
  <template id="tmp">
    <transition appear>
      <div>
        <label>评论人:<input type="text" v-model="inputname"></label>
        <label>评论者:<input type="text" v-model="inputcontent"></label>
        <input type="button" value="提交" @click="add">
      </div>
    </transition>
  </template>
  <div id="app">
    <com @func="show"></com>
    <transition-group appear tag ul>
      <li v-for="item in locallist" :key='item.id'>
        <span>Name:{{item.name}} content:{{item.content}}</span>
      </li>
    </transition-group>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        locallist:null,
        list: [{
          id: Date.now(), name: "张三", content: '进口附近看到'
        },
        {
          id: Date.now(), name: "李四", content: '打好久好久'
        }]
      },
      methods: {
        show(){
          this.locallist=JSON.parse(localStorage.getItem('cmts')||'[]')

        }
      },
      components: {
        com: {
          template:"#tmp",
          data() {
            return {
              inputname: '',
              inputcontent: ''

            }
          },
          methods:{
            add(){
              var comment={
                id:Date.now(),
                name:this.inputname,
                content:this.inputcontent
              }
              var locallist=JSON.parse(localStorage.getItem('cmts')||'[]')
              locallist.unshift(comment)
              localStorage.setItem('cmts',JSON.stringify(locallist))
              this.inputname=this.inputcontent=''
              this.$emit('func')
            }
          }
        }
      },
      created(){
        this.show()
      }

    })
  </script>
</body>

</html>
作者:Yuyy
博客:https://yuyy.info
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇