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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
中止javascript执行的方法
Feb 14 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
vue中监听返回键问题
Aug 28 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
Adodb的十个实例(清晰版)
2006/12/31 PHP
PHP的加密方式及原理
2012/06/14 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
php获取url参数方法总结
2014/11/13 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python中创建二维数组
2018/10/17 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
航空大学应届生求职信
2013/11/10 职场文书
教师申诉制度
2014/01/29 职场文书
党风廉设责任书
2014/04/16 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
公务员检讨书
2014/11/01 职场文书
债务纠纷代理词
2015/05/25 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
nginx安装以及配置的详细过程记录
2021/09/15 Servers