JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app1">
  <input class="input__field input__field__minoru" placeholder="添加一个item" v-on:keyup.enter="addItem" v-model="inputMsg">
  <ol>
    <user-item v-for="(userinfo, index) in list" v-bind:user="userinfo" v-bind:key="index" v-on:remove="list.splice(index,1)"></user-item>
  </ol>
</div>

CSS

input {
		  display: block;
		  width: 240px;
		  padding: 0.8em;
		  margin: 20px;
		  border: none;
		  outline: medium;
		  border-radius: 5px;
		  color: #fff;
		  background: #f06bd4;
		  font-size: 15px;
		  font-weight: bold;
		  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
		
		input:-ms-input-placeholder {
		  color: #ddd;
		}
		/* Internet Explorer 10+ */
		
		input::-webkit-input-placeholder {
		  color: #ddd;
		}
		/* WebKit browsers */
		
		input::-moz-placeholder {
		  color: #ddd;
		}
		/* Mozilla Firefox 4 to 18 */
		
		input:-moz-placeholder {
		  color: #ddd;
		}
		/* Mozilla Firefox 19+ */
		
		input:focus {
		  border: none;
		}
		
		ol {
		  list-style-type: none;
		  list-style: none;
		  padding: 0;
		  margin-left: 20px;
		}
		
		li {
		  display: block;
		  width: 240px;
		  height: 30px;
		  line-height: 30px;
		  border-radius: 5px;
		  padding: 0 12px;
		  margin: 5px 0;
		  list-style: none;
		  list-style-type: none;
		  background: #f06bd4;
		  color: #fff;
		}
		
		li span {
		  max-width: 180px;
		  white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
		}
		
		li .close {
		  float: right;
		  width: 15px;
		  height: 15px;
		  margin: 7px 2px;
		  cursor: pointer;
		  background-image: url(data:image/gif;base64,R0lGODlhDwAPAJEAAP71+PN9lf///wAAACH5BAEHAAIALAAAAAAPAA8AAAInjI8ZwO1twHpQzvkuxmzz7UShlHEdJVZmSp4QOHYX1UbmyNKywgcFADs=);
		}

JavaScript

// 1. v-model 实现数据的双向绑定。改变input的value也会改变其绑定的数据，同样，改变绑定的数据，也会改变input的value。

// 2. v-on 绑定事件监听器。同时注意修饰符的使用。

// 3. 模板的使用。模板注意props，注意key。

// 4. emit 触发当前实例上的事件。

var vm1 = new Vue({
  el: "#app1",
  data: {
    inputMsg: "输入所想的文字，然后回车",
    list: [{
      "name": "七月羽歌",
      "gender": "男"
    }, {
      "name": "白河莹",
      "gender": "女"
    }]
  },
  methods: {
    addItem: function() {
      if (this.inputMsg == "") return;

      this.list.push({
        name: this.inputMsg,
        gender: (Math.floor(100 * Math.random) / 2 == 0) ? "男" : "女"
      });
      this.inputMsg = "";
    }
  },
  components: {
    "user-item": {
      "props": ["user"],
      "template": "<li>{{user.name}} <span class='close' v-on:click='$emit(\"remove\")'></span></li>"
    }
  }
});