• Vue基础案例-查询窗口

    1、怎么判断有一个数组的对象中是否含有某个属性

    Object.hasOwnProperty(' ')

    2、input表单的v-model可以由v-bind:value以及v-on:input组成

    3、怎么判断有一个数组的对象中是否含有某个属性值

    首先先对数组进行遍历，使用for进行遍历，得到每一个对象

    然后使用Object.value('obj') 得到一个包含由属性值的数组，再使用数组索引判断属性值是否等于内容

    Object.keys('obj')得到一个包含由对象属性组成的数组

    4、元素居中

    居中的元素的top =（网页高 –元素的高）/ 2;

    居中的元素的left= (网页宽 –元素的宽) /2;

    转化为JavaScript的语法为：

    top = (document.body.clientHeight - element.offsetHeight)/2;

    left = (document.body.clientWidth - element.offsetWidth)/2

     

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         h1 {
    11.             color: red;
    12.             margin-top: 60px;
    13.             text-align: center
    14.         }
    15.         
    16.         .box1 {
    17.             width: 500px;
    18.             height: 420px;
    19.             background-color: skyblue;
    20.             margin: 20px auto;
    21.             border-radius: 20px 20px;
    22.         }
    23.         
    24.         input {
    25.             margin-top: 20px;
    26.             margin-left: 100px;
    27.             width: 300px;
    28.             height: 50px;
    29.             border-radius: 20px 20px;
    30.             font-size: 25px;
    31.         }
    32.         
    33.         .show {
    34.             width: 300px;
    35.             height: 300px;
    36.             background-color: white;
    37.             margin-left: 100px;
    38.             margin-top: 20px;
    39.             font-size: 25px;
    40.         }
    41.     </style>
    42. </head>
    43.  
    44. <body>
    45.     <div id="app">
    46.         <h1>查询系统</h1>
    47.         <div class="box1">
    48.             <input type="text" placeholder="请输入名字" @input="surch">
    49.             <div class="show">{{surchduty}}</div>
    50.         </div>
    51.     </div>
    52.     <script src="/demo3_824/js文件/vue.js"></script>
    53.     <script>
    54.         let data = {
    55.             message: [{
    56.                 name: '张三',
    57.                 duty: '董事长'
    58.             }, {
    59.                 name: '李四',
    60.                 duty: '经理'
    61.             }, {
    62.                 name: '伊吉',
    63.                 duty: '财务经理'
    64.             }],
    65.             surchname: '',
    66.             surchduty: '库里没有这个人'
    67.         }
    68.         const app = new Vue({
    69.             el: '#app',
    70.             data: data,
    71.             methods: {
    72.                 surch() {
    73.                     //input表单监听事件得到value值
    74.                     //   console.log(event.target.value);
    75.                     //
    76.                     let newvalue = event.target.value
    77.                     for (let i = 0; i < this.message.length; i++) {
    78.                         //    console.log(newvalue);
    79.                         //  console.log(Object.values(this.message[i]));
    80.                         if (Object.values(this.message[i])[0] == newvalue) {
    81.                             return this.surchduty = this.message[i].duty
    82.  
    83.                         } else {
    84.                             this.surchduty = '库里没有这个人'
    85.                         }
    86.                     }
    87.  
    88.  
    89.                 }
    90.             }
    91.         })
    92.     </script>
    93. </body>
    94.  
    95. </html>

  • 相关阅读:
    商业管理和经济学哪个好ib？
    C#目录和文件管理
    LLM基础模型系列：Prompt-Tuning
    zlibrary无法访问的一些解决方法
    软件工程导论：概述引言
    2024年刷题记录
    小米K8s运维-云原生方向（面经分享）
    商人宝:网页收银软件有哪些功能
    Node.js |（七）express案例实践：记账本 | 尚硅谷2023版Node.js零基础视频教程
    入门C++程序员需要怎么下手？
  • 原文地址：https://blog.csdn.net/qq_45387575/article/details/126853155