VUE前端应用开发课程实验------实验二

最新推荐文章于 2024-06-06 00:22:00 发布

又菜有爱写

最新推荐文章于 2024-06-06 00:22:00 发布

阅读量264

点赞数 1

分类专栏： vue实验文章标签： vue.js 前端 html css javascript

本文链接：https://blog.csdn.net/m0_54430913/article/details/131242433

版权

vue实验专栏收录该内容

7 篇文章 4 订阅

订阅专栏

一、实验内容：

（1）使用条件渲染指令（v-if、v-show）指令实现图片的隐藏和显示控制

（2）学会使用循环渲染指令，实现电影票房排序，代办事项记录功能

二、实验流程：

（1）点击按钮控制图片的显示和隐藏，同时按钮的文字发生响应改变

（2）实现电影票房排序和按原始顺序进行反转

（3）完成代办事项记录，在输入框输入你的代办事项，点击“添加按钮”，则进入未完成项列表中，同时数量增加，点击未完成项中的“删除按钮”，该事项则进入已完成列表，同时数量增加。

三、实验源码：

（1）点击按钮控制图片的显示和隐藏，同时按钮的文字发生响应改变

<!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>
    <script src="vue.js"></script>
</head>
<body>
   <div id="box">
     <input type="button" :value="text" v-on:click="change">
     <button v-show="show" >
             <img src="镇北堡西部影城.jpg" alt="" style="width: 500px;height: 300px;">
     </button>
       
   </div>

   <script type="text/javascript">
    new Vue({
        el: '#box',
        data:{
            text: '隐藏图片',
            show:true
        },
        methods: {
            change(){
                this.text === '隐藏图片'? this.text='显示图片' : this.text ='隐藏图片'
                this.show = ! this.show
            }

        },
    })
    
   </script>
</body>
</html>

（2）实现电影票房排序和按原始顺序进行反转

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <table  border="1">
            <tr>
                <td>电源名称</td>
                <td>电影票房（单位：亿）</td>
            </tr>
            <tr v-for="(items,index) in movies">
                <td>{{items.name}}</td>
                <td>{{items.num}}</td>
            </tr>
           </table><br>
           <button @click="sortMovie">按票房排序</button>
           <button @click="reverseMovie">反转</button>
        
    </div>
   
   <script>
    new Vue({
        el:'#box',
        data:{
            movies:[
                {name:"红海行动",num:30},
                {name:"西红柿首富",num:10},
                {name:"狙击手",num:20},
            ]
        },
        methods: {
            sortMovie(){
                this.movies.sort(function(a,b){
                    var x=a.num;
                    var y=b.num;
                    return (x>y)? -1:1;
                })
            },
            reverseMovie(){
                this.movies.reverse();
            }
        },
    })
   </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>
    <script src="vue.js"></script>
</head>
<body>
   <div id="app">
    <h2>最近完成的计划</h2>
    <input type="text" v-model="inputValue" >
    <button @click="add">添加</button>
    
    <p>未完成{{nofintotal}}项目</p>
    <ul>
        <li v-for="(item,index) in plans " :key='index' v-if="!item.isok" >{{index+1}}.{{item.text}}
            <input type="checkbox" v-model="item.isok" @click="dj(index)">
            <button @click="del(index)">删除</button>
        </li>
    </ul>
    <p>已完成{{fintotal}}项目</p>
    <ul >
        <li v-for="(item,index) in dolist" :key="index" v-if="item.isok">
           {{index+1}}.{{item.text}}
            <input type="checkbox" v-model="item.isok"  />
        </li>
    </ul>
   </div>

   <script type="text/javascript">
     new Vue({
        el:'#app',
        data(){
            return {
                plans:[ ],
                dolist:[],
                inputValue:'',
            }
        },
        computed:{
            nofintotal(){
                var plansl =0
                var dolistl =0
               for(i in this.plans){
                 plansl= this.plans.length;
                 }
               for(i in this.dolist){
                 dolistl = this.dolist.length;
               }

               return plansl-dolistl;
            },
        
            fintotal(){
                for(i in this.dolist){
                    return this.dolist.length
                }
            }
        },
        methods: {
            add(index){
                var text =this.inputValue;
              this.plans.push({text:text,isok:false});
              this.inputValue= '';
            },
            del(index){
              this.plans.splice(index,1);
            },
            dj(index){
                  
                this.dolist.push(this.plans[index])               
            }
           
        },
     })

   </script>
</body>
</html>