Vue基础案例（水果搜索，购物车，todolist，留言板，跑马灯)

01.水果搜索案例

思路以及运用知识点

通过computed计算 keyword与list ，算出findlist
如果list中的某一项包含 keyword关键字，在flist保留该项
⭐includes检测是否包含某个字符串， indexOf()不等于-1。如果遍历的元素包含keyword，返回true保留当前的item，当通过indexOf查字符串时候返回-1 代表找不到
⭐ filter()过滤数组，返回包含了符合条件的所有元素组成的数组
trim() 移除字符串两端的空格
箭头函数

1.把function去掉
2.在()与{}添加箭头 =>
3.若有返回值 {}和return还可以省略
4.若参数只有一个，()还可以省略
5.普通函数也可以改写成箭头函数需要把这个名字赋值给一个变量，调用的时候还是函数名();

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>水果搜索</title><script src="js/vue.js"></script></head><body><div id="app"><h2>水果搜索功能的实现</h2><input type="text" v-model="keyword"><div v-for="(item,index) in findlist" :key="index">{{item}}</div></div><script>new Vue({el: "#app",data() {return {keyword: "",list: ["苹果", "枇杷", "山楂", "梨", "樱桃", "李子", "草莓", "橘子", "柚子", "西瓜", "香蕉", "枣", "葡萄", "蓝莓", "芒果","菠萝", "枸杞", "番石榴", "山竹", "椰子", "槟榔", "榴莲", "荔枝", "龙眼", "火龙果", "桑葚", "柿子", "杨梅"]}},computed: {findlist() {if (this.keyword.trim() === "") {return this.list;} else {var temp = this.list.filter(item => {if (item.indexOf(this.keyword) != -1) {return true;} else {return false;}});return temp;}}},})</script></body>
</html>

02.购物车

思路以及运用知识点

实现随着数量价格增加总价改变，以及全选功能
通过totalPrice实现价格累加 totalCount实现数量累加
运用了forEach遍历，当元素值sel为true才累加
⭐watch监听复选框的改变
⭐every()检测数组所有元素是否都符合指定条件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><table border=""><tr><th><input type="checkbox" v-model="all" @change="checkAll"></th><th>商品名称</th><th>商品价格</th><th>商品数量</th></tr><tr v-for="item in goods" :key="item.name"><td><input type="checkbox" v-model="item.sel"></td><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="item.num++">{{item.num}}</button></td></tr></table><p>总价：{{totalPrice}} 共{{totalCount}}件</p></div><script>new Vue({el: "#app",computed: {totalPrice: function() {var n = 0;this.goods.forEach(item => {if (item.sel) {n += item.price * item.num;}})return n;},totalCount: function() {var n = 0;this.goods.forEach(item => {if (item.sel) {n += item.num;}})return n;}},watch: {"goods": {handler: function(nval) {this.all = this.goods.every(item => item.sel);},deep: true,}},methods: {checkAll() {this.goods.forEach(item => item.sel = this.all)}},data() {return {all: true,goods: [{name: "javascript",price: 20,num: 1,sel: true,},{name: "vue",price: 40,num: 1,sel: false}]}}})</script></body>
</html>

03.todolist

思路以及运用知识点

在文本框输入文字，按回车，文字添加到list里面
单击x 删除当前行
⭐本地存储，定义data获取本地数据localStorage
⭐ 当list数据发生变化的时候存储（利用了watch监听）
unshift在数组的前面添加一个元素
splice（n，m，j）从第n个删除m个，添加j
indexOf(item) 查找item在列表的下标

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./js/vue.js"></script></head><body><div id="app"><input type="text" @keyup.enter="addItem"><!-- 遍历数据list --><h3>未完成{{undolist.length}}</h3><div v-for="item in undolist" :key="item.title"><input type="checkbox" v-model="item.done"><span>{{item.title}}</span><button @click="delItem(item)">x</button></div><h3>已经完成{{donelist.length}}</h3><div v-for="item in donelist" :key="item.title"><input type="checkbox" v-model="item.done"><span>{{item.title}}</span><button @click="delItem(item)">x</button></div></div><script>new Vue({el: "#app",computed: {// 通过计算list算出undolist没有完成的列表undolist() {// 通过list过滤 返回item.done值为false的所有元素return this.list.filter(item => !item.done);},donelist() {// 返回保留item.done值为true的元素return this.list.filter(item => item.done);}},methods: {// 删除元素delItem(item) {// 查找item在list的下标var ind = this.list.indexOf(item);// 进行删除this.list.splice(ind, 1);},// 添加元素addItem(e) {this.list.unshift({done: false,title: e.target.value})e.target.value = "";}},data() {return {list: JSON.parse(localStorage.getItem("todo") || '[{"done":true,"title":"学习html"}]')}},watch: {"list": {handler() {localStorage.setItem("todo", JSON.stringify(this.list))},deep: true}}})</script></body>
</html>

04.留言板

思路以及运用知识点

⭐把留言添加到下面，需要用到 unshift（把对象添加到数组的最前面）
⭐删除留言需要用到splice
⭐想要把数据存储到本地，刷新添加数据不会消失，需要本地存储。一开始就需要取数据，增加删除都要再次存储数据。同时存的数据必须是字符串，取出来的字符串转换为js对象
本地存localStorage.setItem(key,value)
取 localStorage.getItem(key)
删 localStorage.removeItem(key)
JSON.parse(str) 字符串转js对象
JSON.stringify(obj) js对象转换为字符串
数据和表单绑定 v-model

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><h1>欢迎来到吐槽大厅</h1><label for="user">用户名</label><br><input type="text" placeholder="用户名" id="user" v-model="name"><br><label for="con">吐槽内容</label><br><textarea id="con" cols="30" rows="10" placeholder="吐槽内容" v-model="msg"></textarea><br><button @click="sub">提交</button><h3>吐槽回复：</h3><table border="" rules="none" style="width:400px"><tr v-for=" item in list" style="border-bottom: 1px solid #333;"><td>{{item.name}}说</td><td style="text-align: left;">{{item.msg}}</td><td style="text-align: right;"><a @click.prevent=" del(item)" style="color:blue">删除</a></td></tr></table></div><script>new Vue({el: "#app",methods: {sub() {this.list.unshift({name: this.name,msg: this.msg})this.name = "",this.msg = ""},del(item) {var ind = this.list.indexOf(item);this.list.splice(ind, 1)}},data() {return {list: [],name: "",msg: ""}}})</script></body></html>

05.跑马灯

思路以及运用知识点

字符串第一个放在最后面
字符串转数组 split(‘’)
删除数组第一个 shift
添加到数组的最后一个push
⭐设置定时器 setInterval ，让点击时可以动起来
清除定时器 clearInterval 在播放之前也需要清除计时器，防止点击飘，速度会越来越快
⭐通过created可以使之自动播放

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./js/vue.js"></script></head><body><div id="app"><h1>{{str}}</h1><button @click="play()">飘</button><button @click="stop()">定</button></div><script>new Vue({el:"#app",data(){return {str:"跑马溜溜的山哟，你好！",ind:null,//停止动画}},// vue创建完毕，自动执行playcreated(){this.play();},methods:{play(){// 停止动画播放clearInterval(this.ind);this.ind = setInterval(()=>{// 字符串转数组var temp = this.str.split('');// 获取字符串第一个var first = temp.shift();// 添加到最后temp.push(first);// 转换为字符串，赋值给strthis.str = temp.join('');},50)},stop(){clearInterval(this.ind);},}})</script></body>
</html>

Vue基础案例（水果搜索，购物车，todolist,留言板，跑马灯)相关推荐

Vue基础案例-成绩显示
成绩排序应该按照降序排 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
订阅号留言板：公众号留言功能开通新思路！（建议收藏）
前言由于新申请的微信公众号没有留言功能了,没有留言就无法跟读者进行互动,写出去的文章好像得不到反馈一样,像一个人的独角戏,感觉有蛮难受的,所以就制作了一个小程序用于留言,来代替原版公众号的留言功能. ...
（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
vue基础篇实战总结一：购物车实战
上周看完了vue基础篇本想继续看进阶篇本着基础不牢地动山摇的原则特地总结重新再写一遍基础篇中实战开发过的一些小东西,以加深熟练度如果还没有开始vue学习的朋友可以看这本书,还不错链接:htt ...
Vue知识（一）Vue基础语法
Vue知识一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
Vue全家桶（一）：Vue基础+Vue-Cli+Vue组件化+过渡动画
目录 1.Vue概述 1.1 认识Vue 1.2 Vue的两核心 1.3 Vue的初体验 1.4 Vue的生命周期 2. Vue-CLI (Command Line Interface) 3. Vue ...

Vue基础案例（水果搜索，购物车，todolist,留言板，跑马灯)

Vue基础案例（水果搜索，购物车，todolist，留言板，跑马灯)

01.水果搜索案例

02.购物车

03.todolist

04.留言板

05.跑马灯

Vue基础案例（水果搜索，购物车，todolist,留言板，跑马灯)相关推荐

最新文章

热门文章