vue3知识点4应用组件的两个小案例 添加删除列表信息 组件切换显示

vue3知识点4应用组件的两个小案例

前言:本文是根据组件的基础知识完成的小案例,组件的知识点请移步vue3组件详解链接。

案例一

效果如下:

vue3知识点4应用组件的两个小案例 添加删除列表信息 组件切换显示_第1张图片

要求:

使用组件的知识点完成上面的布局,这是一个组件,可以添加到父组件app中 .

最后按钮显示的是最后一项的姓名

点击添加往列表中添加一项

点击删除 把最后一项删除

分析:这个题只需要会如何注册组件,功能很简单,和上次写购物车的增加删除是一个功能。

全部代码:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="js/vue.global.js">script>
	head>
	<body >
		<div id="app">
			<h2>我是父的头部h2>
			
			<temp1>temp1>
			
		div>
		
		<template id='temp1'>
			组件1
			<input type="text" placeholder="新的姓名" v-model="obj.name">
			<input type="text" placeholder="新的出生年" v-model="obj.birth">
			<button @click='add'>添加button>
			
			<ul v-for="item,index in arrlist">
				<li>{
  { item.name }}----{
  { item.birth }} li>
			ul>
			<button @click='del' :disabled="arrlist.length<=1">删除{
  { arrlist[arrlist.length-1].name }}button>
			 
		template>
		
	body>
	<script type="text/javascript">
		// 创建一个组件
		//2.组件的数据层,并且用template绑定视图层
		const data1 = {
     
			obj:{
     
				name:'',
				birth:''
			},
			arrlist:[
				{
     name:'姓名',birth:'出生年'},
				{
     name:'小明',birth:1970},
				{
     name:'小拜',birth:1980},
				{
     name:'小话',birth:1990},
				{
     name:'小黑',birth:2000}
				
			]
			
			
		}
		const temp1app={
     
		  data() {
     
		    return data1
		  },
		  template:'#temp1',
		  methods:{
     
			  add(){
     
				  console.log(this.obj)
				  this.arrlist.push(this.obj)
                  //清除obj,一个是为了框内清除,另一个是obj是引用类型,为了下一次输入的时候上一次的值不被改变
				  this.obj={
     }
			  },
			  

你可能感兴趣的:(vue基础,vue.js,前端,javascript,vue,html)