Vuejs事件处理

最新推荐文章于 2022-04-13 10:43:28 发布

原创最新推荐文章于 2022-04-13 10:43:28 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vuejs

VueJs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Vue.js框架创建一个简单的待办事项应用程序。通过代码示例，展示了如何利用Vue.js的数据绑定特性，如v-model指令，以及事件处理@click方法，实现输入待办事项并将其添加到列表的功能。同时，深入解析了Vue实例的配置，包括组件选择器、数据属性和方法的定义。

index.html

<div id="app">
      <p>{{title}}</p>
      <ul>
        <li v-for='todo in todos'>{{todo}}</li>
      </ul>
      <div>
        <!-- v-model指令用于在表单类元素上双向绑定数据 -->
        <input type="text" v-model='mytodo'>
        <button @click="handleClick">添加</button>
      </div>
    </div>

main.js

new Vue({
  //el:组件选择器，哪个组件是vuejs的实例
  el: '#app',
  data:{
    mytodo:'',
  },
  methods:{
    handleClick(){
      console.log(this.mytodo)
      this.title='hello Program',
      this.todos.push(this.mytodo)
      this.mytodo=''//置空
    }
  }
})