current position:Home>Vue basic case (fruit search, shopping cart, todolist, message board, marquee)

Vue basic case (fruit search, shopping cart, todolist, message board, marquee)

2022-09-23 05:59:14Struggle not to lose hair

Vue基础案例(fruit search,购物车,todolist,留言板,跑马灯)

01.Fruit search case

ideas and use of knowledge

  1. 通过computed计算 keyword与list ,算出findlist
  2. 如果listan item in contains keyword关键字,在flistKeep this item
  3. includesCheck if a string is included, indexOf()不等于-1.If the traversed element contains keyword,返回true保留当前的item,当通过indexOfReturns when checking the string-1 代表找不到
  4. filter()过滤数组,Returns an array containing all elements that match the condition
  5. trim() 移除字符串两端的空格
  6. 箭头函数
  • 1.把function去掉
  • 2.在()与{}添加箭头 =>
  • 3.若有返回值 {}和return还可以省略
  • 4.若参数只有一个,()还可以省略
  • 5.Ordinary functions can also be rewritten as arrow functions This name needs to be assigned to a variable,When called, it is still the function name();
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>fruit search</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>The realization of fruit search function</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.购物车

ideas and use of knowledge

  1. Realize that the total price changes as the quantity price increases,and the select all function
  2. 通过totalPriceRealize price accumulation totalCountAccumulate quantity
  3. 运用了forEach遍历 ,when the element valuesel为true才累加
  4. watchListen for checkbox changes
  5. 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

ideas and use of knowledge

  1. Enter text in the text box,按回车,文字添加到list里面
  2. 单击x 删除当前行
  3. 本地存储,定义data获取本地数据localStorage
  4. 当listStored when data changes(利用了watch监听)
  5. unshiftAdds an element to the front of the array
  6. splice(n,m,j) 从第n个删除m个,添加j
  7. indexOf(item) 查找itemsubscript in the list
<!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算出undolistThere is no completed list 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.留言板

ideas and use of knowledge

  1. Add your message below,需要用到 unshift(Add the object to the front of the array)
  2. 删除留言 需要用到splice
  3. Want to store data locally,Refresh to add data does not disappear,需要本地存储.Data needs to be fetched from the beginning,Add and delete data to be stored again.The data stored at the same time must be a string,Convert the extracted string to js对象
    本地存localStorage.setItem(key,value)
    取 localStorage.getItem(key)
    删 localStorage.removeItem(key)
  4. JSON.parse(str) 字符串转js对象
    JSON.stringify(obj) js对象转换为字符串
  5. Data and form binding 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.跑马灯

ideas and use of knowledge

  1. Strings are placed first at the end
  2. 字符串转数组 split(‘’)
  3. Delete the first one in the array shift
  4. Add to the last of the arraypush
  5. 设置定时器 setInterval ,Make it move when you click
  6. 清除定时器 clearInterval The timer also needs to be cleared before playback,Prevent clicks from floating,速度会越来越快
  7. 通过createdIt can be made to play automatically
<!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创建完毕,自动执行play created(){
       this.play(); }, methods:{
       play(){
       // 停止动画播放 clearInterval(this.ind); this.ind = setInterval(()=>{
       // 字符串转数组 var temp = this.str.split(''); // Get the first string in the string var first = temp.shift(); // 添加到最后 temp.push(first); // 转换为字符串,赋值给str this.str = temp.join(''); },50) }, stop(){
       clearInterval(this.ind); }, } }) </script>
	</body>
</html>

copyright notice
author[Struggle not to lose hair],Please bring the original link to reprint, thank you.
https://caren.inotgo.com/2022/266/202209230553590648.html

Random recommended