+
 新版
2016-11-05 12:19
在input中输入内容后按enter键往ul里添加一条li和删除:
Vue:
<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      <span>{{todo.text}}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [{text: 'Add some todos'}]
  },
  methods: {
    addTodo: function() {
      var text = this.newTodo.trim();
      if(text) {
        this.todos.push({text: text});
        this.newTodo = '';
      }
    },
    removeTodo: function(index) {
      this.todos.splice(index, 1); //从下标index开始,删除1个元素
    }
  }
});

jQuery:
<div id="app">
  <input>
  <ul>
    <li><span>jQuery</span> <button>X</button></li>
  </ul>
</div>
//处理enter添加事件
$("#app input").on("keyup", function(e){
  if(e.keyCode == 13 && $(this).val() != "") {
    $("#app ul").append("<li>"+this.value+" <button>X</button></li>");
    $(this).val("").focus();
  }
}).focus();
//处理button删除事件
$("#app").on("click", "button", function(){
  $(this).parent().remove();
});
2016-11-05 12:16
文本框输入时即时输出效果:
Vue:
<div id="demo">
  <input v-model="message">
  <p>{{message}}</p>
</div>
var demo = new Vue({
  el: '#demo',
  data: {
    message: 'Hello Vue.js!'
  }
});

jQuery:
<div id="demo">
  <input>
  <p></p>
</div>
$(function(){
  $("p").text($("input").attr("value"));
  $("#demo input").on("input", function() { //IE8没有input事件,可以换成keyup
    $("#demo p").empty().text(this.value);
  }).focus();
});
2016-11-05 11:56
出bug了,又升级到2.0.5啦
2016-11-05 10:14
支持
2016-11-05 09:58
正在学,还可以
2016-11-05 09:11
表示关注
2016-11-05 08:34
不错
回复 @
{{emojiItem.symbol}}
返回顶部
顶部