鍍金池/ 問答/HTML/ vue實現(xiàn)添加備注的功能

vue實現(xiàn)添加備注的功能

clipboard.png
如何實現(xiàn)如圖的功能，點擊標簽里的備注 確定之后 頁面上的備注欄 出現(xiàn)選中的內(nèi)容

回答
編輯回答
敢試

clipboard.png

<template>
  <div>
    <ul class="list">
      <li class="item" v-for="(item,index) in data" :key="index">{{item.name}}</li>
    </ul>
    <div class="box">
      <input type="text" v-model="item">
      <button @click="click">確定</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      item: "",
    };
  },
  methods: {
    click() {
      this.data.push({
        name: this.item,
      });
      this.item = "";
    }
  }
};
</script>
<style lang="scss">
.list {
  clear: box;
  .item {
    padding: 10px;
    border: 1px solid #ccc;
    display: inline-block;
    margin: 5px;
    &:last-child {
      border-color: #f00;
    }
  }
}
</style>

大概就是上面的思路

2017年1月24日 17:59
編輯回答
情未了

給你提供一個思路，切記，僅為思路，邏輯還未完善，以理解為主，直接復制運行便可看到效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>點擊下面的字</p>
        <p><span v-for="item in list" :key="item.id" @click="addOrMinus(item)"> {{item.name}}</span></p>
        <p>結(jié)果：</p>
        <p>
            <span v-for="item in result" :key="item.id">{{item.name}} </span>
        </p>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    name: "清淡"
                }, {
                    id: 2,
                    name: "半糖"
                }, {
                    id: 3,
                    name: "多放鹽"
                }],
                result: []
            },
            methods: {
                addOrMinus(item) {
                    this.result.push(item);
                }
            }
        })
    </script>
</body>
</html>
2017年2月15日 22:37