1.Vue-在独立页面实现Vue的增删改查

题记

        在独立页面实现Vue的增删改查，以下是具体的代码，和操作流程。

编写index.html页面

        index.html文件如下：

 

  
  
  
  


  
  

    
学生列表
    
    
    

      

        

          
姓名
          
年龄
          
操作
        
      
      

        
        

          
{{ student.name }}
          
{{ student.age }}
          

            
            编辑
            删除
          
        
      
    

    
添加/编辑学生
    
    

      索引:
      {{editingIndex}} 
      姓名:
      
      
      年龄:
      
      
      {{ editingIndex === null ? '添加' : '保存' }}
    
  

  

  
  
  
  


  
  

    
学生列表
    
    
    

      

        

          
姓名
          
年龄
          
操作
        
      
      

        
        

          
{{ student.name }}
          
{{ student.age }}
          

            
            编辑
            删除
          
        
      
    

    
添加/编辑学生
    
    

      索引:
      {{editingIndex}} 
      姓名:
      
      
      年龄:
      
      
      {{ editingIndex === null ? '添加' : '保存' }}
    
  

  

打开页面 

         可以使用vscode的live server打开页面

        

 展示图

 

 

 

后记 

        觉得有用可以点赞或收藏！