事件练习作业

最新推荐文章于 2024-11-01 14:29:13 发布

啊唯11

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量146

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_66059613/article/details/127422805

版权

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>Document</title>
</head>

<body>
    <div class="app">
        <input type="text" v-model.trim="num1" placeholder="输入数字求平方">
        <br>
        平方:{{square}}
        <br>
        <input type="text" v-model.trim="value" placeholder="输入数字求平方根">
        <button @click="sqrt">求平方根</button>
        <br>
        平方根:{{num2}}
        <br>
        <br><br><br>
        methods随机数(每次点击生成新数字)<br>
        <button @click="random1">methods生成随机数</button>
        {{m_rnum}}
        <br>
        computed随机数(随机生成一次数字)
        <br>
        <button @click="random2">methods生成随机数</button>
        {{c_rnum}}

        <script src="../../../js/vue.js"></script>
        <script>
            let vm = new Vue({
                el: '.app',
                data: {
                    num1: '',
                    num2: '',
                    value: '',
                    m_rnum: '',
                    c_rnum: ''
                },
                methods: {
                    random1() {
                        // console.log(Math.random()); 
                        this.m_rnum = Math.random()
                    },
                        sqrt(){
                            vm.sqr = vm.value;
                            console.log(vm.value + '的平方根是' + vm.num2);
                        },
                        random2(){
                            this.c_rnum = vm.Random
                        }
                    },
                    computed:{
// 求平方 
square(){
return this.num1 * this.num1
},
// 求平方根 
sqr:{
get(){
return this.num2 = 2
// 外面num2依旧还是空，只是这里sgr的值为2,与外面的num2无关
},
set(value){
this.num2 = Math.sqrt(value)
// 这里开始外面num2的值变成value的平方根
}
},
// 求随机数---运行一次就会被缓存起来 
Random(){
let rnum = Math.random()
 return rnum
}
                    }
})
            
        </script>
    </div>
</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>Document</title>
</head>

<body>

    <div class="app">
        <button @click="click">单击</button>
        <button @dblclick="dblclick">双击</button>

        <input type="text" 
        placeholder="写下你想说的话吧"
         @focus="focus" 
         v-bind:placeholder="placeholder" 
         @blur="blur"
            @keydown.enter="keydown"
             @keyup.enter="keyup">
        <!--鼠标指针事件(以移入指定元素为例) -->
        <div class="box"
         v-bind:class="{'box-leave':isshow}"
          @mouseenter="m_enter">
        </div>
        <!-- 样式绑定:v-bind:class改变类名来改变样式 -->
    </div>
 <script src="../../../js/vue.js"></script>
        <script>
            new Vue({
                el: '.app',
                data: {
                    isshow: '',
                    placeholder: "写下你想说的话吧"
                },
                methods: {
                    // 单击事件
                    click(){
                        alert('单击出奇迹')
                    },
                    // 双击事件 
                    dblclick() {
                        alert('双击666')
                    },
                    //聚焦事件，改变input提示文字 
                    focus() {
                        this.placeholder = "无论"
                    },
                    // 失焦事件，让改变的提示文字复原 
                    blur() {
                        this.placeholder = '和射手的'
                    },
                    // 键盘按下事件，按回车弹窗，控制台会输出1 
                    keydown() {
                        alert("谢谢惠顾")
                        console.log(1);
                    },
                    // 键盘松开事件，松开回车，控制台会输出2(要把上面弹窗关掉)
                    keyup(){
                        console.log(2);
                    },
                    //鼠标路过指定触发，盒子消失
                    m_enter(){
                        this.isshow = 'true'
                    }
                }

            })
        </script>

</body>

</html>

轻映录屏 2022-10-20 10-58-19