用户注册



邮箱:

密码:

用户登录


邮箱:

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

发表随想


还能输入: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、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

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

加载中,请稍后...