vue实现列表的添加点击
更新时间：2016年12月29日 08:46:27 作者：张飞翔
这篇文章主要为大家详细介绍了vue实现列表的添加点击，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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 = '';
}
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
组件是Vue核心功能之一,合理的组件化,可以减少我们代码的冗余,提高项目的可维护性,下面这篇文章主要给大家介绍了关于Vue中父子组件通信与事件触发的相关资料,需要的朋友可以参考下2022-03-03
Vue3报错‘defineProps‘ is not defined的解决方法
最近工作中遇到vue3中使用defineProps中报错,飘红,所以这篇文章主要给大家介绍了关于Vue3报错‘defineProps‘ is not defined的解决方法,需要的朋友可以参考下2023-01-01
使用 intro.js这个插件,来实现一个引导性的效果,经常在一些新手引导页遇到这样的需求,下面通过本文给大家分享vue+intro.js插件实现引导功能,感兴趣的朋友一起看看吧2024-06-06
本文主要探讨了网页刷新时,原本隐藏的元素会一闪而过的问题,以及尝试过的解决方案并未奏效,通过实例代码介绍了如何处理 Vue3 中隐藏元素刷新闪烁问题,感兴趣的朋友跟随小编一起看看吧2024-10-10
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
这篇文章主要给大家介绍了Node.js使用orm2进行update操作时关联字段无法修改的解决方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要介绍了解决vuex刷新数据消失问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本文主要介绍了el-table渲染慢卡顿问题最优解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最近项目中有一个校验身份证号手机号的业务,索性给大家总结下,这篇文章主要给大家介绍了关于vue3表单参数校验及正则表达式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
IE11浏览器无法解析ES6语法导致Vue项目在IE11下显示空白,解决方法包括安装babel-polyfill,并在项目的main.js文件中引入babel-polyfill,此外,js-base64版本3及以上不兼容IE11,解决办法是使用版本3以下的js-base64,这些措施可以帮助兼容IE11,确保项目正常运行2024-09-09
这篇文章主要介绍了vue使用高德地图实现实时天气预报功能,根据定位功能，使用高德地图实现定位当前城市的天气预报功能，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-05-05
最新评论