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自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
理解javascript封装
Feb 23 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
微信小程序input抖动问题的修复方法
Mar 03 Javascript
SSM VUE Axios详解
Oct 05 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
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
vue实现购物车案例
2020/05/30 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
python如何进行矩阵运算
2020/06/05 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
区域总监的岗位职责
2013/11/21 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
环保倡议书50字
2014/05/15 职场文书
护士实习求职信
2014/06/22 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
redis 查看所有的key方式
2021/05/07 Redis