vue实现列表的添加点击


Posted in Javascript onDecember 29, 2016

本文实例为大家分享了vue实现列表的添加点击,供大家参考,具体内容如下

使用指令:v-on v-for v-on v-bind v-model

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue.js</title>
 <style>
  body {font-family: "\5FAE\8F6F\96C5\9ED1"}
  .red {color: red;}
  body > div {
   width: 200px;
   margin: 50px auto;
  }
 </style>
</head>
<body>
 <div id="app">
  <h3>vue——列表的添加</h3>
  <input type="text" v-model="newitem" v-on:keyup.enter="clickKey">
  <ul>
   <li v-for="item in items" v-text="item.event" 
   v-bind:class="{red:item.isFinish}" v-on:click="liClick(item)"></li>
  </ul>
 </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="testvue.js"></script>
</body>
</html>

js

window.onload = function() {
 Vue.component("todo-item", {
  props: ["todo"],
  template: "<li>{{todo.text}}</li>"
 })
 var app = new Vue({
  el: '#app',
  data: {
  items: [
  ],
  newitem: ''
  },
  methods: {
  liClick: function (item) {
   item.isFinish = !item.isFinish;
  },
  clickKey: function () {
   this.items.push({
    event: this.newitem,
    isFinish: false
   })
   this.newitem = '';
  }
  }
 });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
swiperjs实现导航与tab页的联动
Dec 13 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 #Javascript
基于javascript的Form表单验证
Dec 29 #Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 #Javascript
bootstrap导航条实现代码
Dec 28 #Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 #Javascript
bootstrap导航、选项卡实现代码
Dec 28 #Javascript
bootstrap提示标签、提示框实现代码
Dec 28 #Javascript
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
php桌面中心(一) 创建数据库
2007/03/11 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Python 在函数上添加包装器
2020/07/28 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
求职导师推荐信范文
2015/03/27 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
Java 多态分析
2022/04/26 Java/Android