用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

vue.js添加删除内容

2016-10-18 作者: 云代码会员举报

[javascript]代码库

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <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> 
<script type="text/javascript"
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) 
    
  }, 
  created: function () { // 钩子 
    // `this` 指向 vm 实例 
    console.log('a is: ' + this.a) 
  
}); 
console.log(vm.$data); 
console.log(vm.$el); // == document.getElementById('app') 
</script> 
</body>
 
</html>


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...