Vue前端案例

最新推荐文章于 2024-09-02 10:17:00 发布

@sudo

最新推荐文章于 2024-09-02 10:17:00 发布

阅读量2.3k

点赞数 2

分类专栏： front _end 文章标签： javascript 前端

本文链接：https://blog.csdn.net/IDpangpengcheng/article/details/123667795

版权

front _end 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学员信息表</title>
    <style>
        table{
            width: 500px;
            /* height: 200px; */
            border: 1px solid #ccc;
        }
        table tr td {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>学员信息表</h2>
        <p>姓名:<input type="text" v-model="name"></p>
        <p>年龄:<input type="text"  v-model="age"></p>
        <p>性别:<input type="text" v-model="sex"></p>
        <p>学籍:<input type="text" v-model="sheng"></p>
        <button @click="add">添加</button>
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>学籍</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in stus">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.sheng}}</td>
                <!-- 用indxe来明确删除的是哪一个 -->
                <td @click="del(index)">删除</td>
            </tr>
            
        </table>

    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                stus:[
                    {name: '张三',age:'18',sex:'男',sheng:'北京'},
                    {name: '李四',age:'21',sex:'男',sheng:'日本'},
                    {name: '佩奇',age:'18',sex:'女',sheng:'英国'},
                    {name: '詹姆斯',age:'37',sex:'男',sheng:'湖人'},
                    {name: '科比',age:'40',sex:'男',sheng:'湖人'}
                    ],
                    name: '',
                    age: '',
                    sex: '',
                    sheng: '',
            },
            methods:{
                add(){
                    // z做一个不能为空的判断
                    if(this.name ==''){ 
                        alert('姓名不能为空'); return false
                    } 
                    if(this.age  ==''){
                        alert('年龄不能为空'); return false
                    }
                    if(this.sex  =='') {
                        alert('性别不能为空'); return false
                    }
                    if(this.sheng  ==''){
                        alert('地方不能为空'); return false
                    }
                    //组装成 数组stus的元素格式，即{}
                    let newmsg  = {name: this.name,  age:this.age, sex:this.sex, sheng:this.sheng}
                    // 把新增信息放到stus里面， 用push()
                    this.stus.push(newmsg);
                     //提交之后，把input变为空 
                     this.name='';
                     this.age='';
                     this.sex='';
                     this.sheng='';
                },                             
                del(index){
                     console.log(index)
                    //  从数组中去掉用splice()
                    // splice(从那儿开始删,删几个)
                    this.stus.splice(index, 1);
                }
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车案例</title>
    <style>
        table{
            margin: 0 auto;
            width: 500px;
            height: 200px;
            border: 1px solid #ccc;
        }
        table tr td {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
          <h2>购物车</h2>
          <table>
              <tr>
                   <th>ID</th>
                   <th>名称</th>
                   <th>价格</th>
                   <th>数量</th>
                   <th>操作</th>
              </tr>
              <tr  v-for="(item ,index) in goods">
                   <td>{{item.id}}</td>
                   <td>{{item.name}}</td>
                   <td>{{item.price}}</td>
                   <td>
                       <!-- 数据驱动视图数据改变视图就发生了改变 -->
                       <button @click="item.num--"  :disabled="item.num==0">-</button>
                       {{item.num}}
                       <button @click="item.num++">+</button>
                    </td>
                   <td>  <button @click="item.num=0">清空</button></td>
                 
              </tr>
          </table>
          <!-- 计算属性 -->
          <h3>总价：{{sum}}</h3>    
          <!-- 方法 -->
          <h3>总价：{{getsum()}}</h3>
    </div>
    
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                goods:[
                    {
                        id:'001',
                        name: '手机',
                        price: '2999',
                        num:0
                    },
                    {
                        id:'002',
                        name: '电脑',
                        price: '2999',
                        num:0
                    },
                    {
                        id:'003',
                        name: '音响',
                        price: '2999',
                        num:0
                    },
                    {
                        id:'004',
                        name: '游戏机',
                        price: '2999',
                        num:0
                    },
                    {
                        id:'005',
                        name: '健身药',
                        price: '2999',
                        num:1
                    }
                ]

            },
            computed:{
                sum(){
                   //所有的商品小计累计之和
                   let total = 0;
                   this.goods.forEach(function(item){
                      total+=item.price*item.num
                   });
                   return total;
                }
            },
            // 方法的形式实现
            methods:{
                getsum(){
                    let total = 0;
                   this.goods.forEach(function(item){
                      total+=item.price*item.num
                   });
                   return total;
                }
            }
        })
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据筛选</title>
</head>
<body>
    <div id="app">
        <h2>数据筛选</h2></h2>
        <input type="text" v-model="name"/>
        <ul>
            <!-- <li v-for="item in person">{{item}}</li> -->
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>


    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        /*
        核心：原数组的每一个元素要和用户输入的值进行匹配
        用到：循环 及indexOf
        最后展示出来的数据是经过筛选后的新数组
        因为多次筛选，使用computed最合适
         */
        new Vue({
            el:"#app",
            data:{
                name:'',
                person:['詹姆斯','詹姆斯哈登','杜兰特','科比','库里','欧文','莫兰特','熊大','熊二']
            },
            computed:{
                 list(){
                  return this.person.filter(item=>{
                        if(item.indexOf(this.name)!=-1){
                            return item
                        }
                    })
                }
            }
        
          
        })
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据筛选</title>
</head>
<body>
    <div id="app">
        <h2>数据筛选</h2></h2>
        <input type="text" v-model="name"/>
        <ul>
            <!-- <li v-for="item in person">{{item}}</li> -->
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>


    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        /*
        核心：原数组的每一个元素要和用户输入的值进行匹配
        用到：循环 及indexOf
        最后展示出来的数据是经过筛选后的新数组
        因为多次筛选，使用computed最合适
         */
        new Vue({
            el:"#app",
            data:{
                name:'',
                person:['詹姆斯','詹姆斯哈登','杜兰特','科比','库里','欧文','莫兰特','熊大','熊二']
            },
            computed:{
                list(){
                     let res= []
                     var newname = this.name
                    this.person.forEach(function(item){
                             if(item.indexOf(newname)!= -1){
                                res.push(item);
                             }
                    });
                    return res;
                }
            }
        })
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [
      { id: 1, name: '西瓜', state: true, price: 10, count: 1 },
      { id: 2, name: '榴莲', state: false, price: 80, count: 2 },
      { id: 3, name: '草莓', state: true, price: 20, count: 3 },
    ]

    // 需求：把购物车数组中，已勾选的水果，总价累加起来！
    /* let amt = 0 // 总价
        arr.filter(item => item.state).forEach(item => {
          amt += item.price * item.count
        })
    
        console.log(amt) */

    // arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { return  ~~ }, 初始值)
    const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)

    console.log(result)

    // reduce累加器
    const  jieguo = arr.filter(item => item.state).reduce((jieguo,item)=>{
      return jieguo+=  item.price * item.count
    },0)
    console.log(jieguo)


    const  yizhong = arr.filter(item=>item.state).reduce((yizhong,item)=>{
     return  yizhong += item.price * item.count
    },0)
    console.log(yizhong)


   var zongsu = 0;
    arr.filter(item=>item.state).forEach(item=>{
        zongsu+= item.price*item.count
    })
    console.log(zongsu)

  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [
      { id: 1, name: '西瓜', state: true },
      { id: 2, name: '榴莲', state: false },
      { id: 3, name: '草莓', state: true },
    ]

    // 需求：判断数组中，水果是否被全选了！   
    const result = arr.every(item => item.state)
    console.log(result)  //false


    var arr1= [
      {id:1,name:'ppc',state:true},
      {id:2,name:'yrh',state:true},
      {id:3,name:'lm',state:true}
    ]

   var jieguo= arr1.every(item=>item.state)
   console.log(jieguo)  //true

  //  判断是否全选用every
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    const arr = ['小红', '你大红', '苏大强', '宝']

    // forEach 循环一旦开始，无法在中间被停止
    /* arr.forEach((item, index) => {
      console.log('object')
      if (item === '苏大强') {
        console.log(index)
      }
    }) */
     
    arr.some((item, index) => {
      console.log('ok')
      if (item === '苏大强') {
        console.log(index)
        // 在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环
        return true
      }
    }) 
   
  </script>
</body>

</html>