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 相关文章推荐
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
jquery datatable服务端分页
Aug 31 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
JavaScript命名空间模式实例详解
Jun 20 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
详解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
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
python 网络编程详解及简单实例
2017/04/25 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
python GUI模拟实现计算器
2020/06/22 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
高中自我评价分享
2013/12/05 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
志愿者宣传口号
2014/06/17 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
销售开票员岗位职责
2015/04/15 职场文书
辅导员学期工作总结
2015/08/14 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android