JavaScript

最新推荐文章于 2024-06-20 20:20:21 发布
最新推荐文章于 2024-06-20 20:20:21 发布
阅读量90 收藏
点赞数
文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whymeso_diao/article/details/115826853
版权

如何使用js

引入js到页面的方法
  1. 定义script标签 在标签内写js代码
  2. 定义.js文件 使用script标签引入 js文件(推荐)
<script src="js/use.js">
    
    </script>

ECMAScript基本语法

  1. 变量
    格式：var 变量名； 默认值：undefined
    特点：可以保存任意数据类型
  2. 数据类型
    分类：
    1. number 数值类型(整数和小数)
    2. string 字符类型(单个字符和多个字符)
    3. boolean 布尔类型(要么true 要么false)
    4. object 对象类型(除了以上类型 都是对象类型)
    5. undefined 未定义变量默认值
  3. 运算符
    分类：
    1. 算术运算符：+ - * / % ++ –
    2. 赋值运算符: = += -= *= /= %=
    3. 比较运算符: > < >= <= != == === !==
    4. 逻辑运算符: & | ! && ||
    5. 位运算符: << >> >>> ^
    6. 三元运算符: 表达式?true:false
  4. 流程控制
    1. if(){}else{} if(){}else if(){}…
    2. switch(){case: break;…}
    3. while(){} do{}while();
    4. for(){}
  5. 数组
    定义：存储一组数据 相当于java中的数组+集合
    特点：可以是任意数据类型 长度可变
    使用：
    1. 定义
    2. 存值
    3. 遍历
    4. 删除值
<!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>
    <script>
        // 1. 定义数组  java  数据类型[] 数组名 = new 数据类型[5]
        var arr = new Array(); // 定义空数组
        var arr1 = new Array(5); // 定义默认长度的数据
        var arr2 = [1,2,true,null,"root"];
        console.log(arr);
        console.log(arr1);
        console.log(arr2);

        // 2. 存数据
        arr[0] = 10;
        arr[1] = 100;
        arr[2] = false;
        arr[3] = "abc";
        arr['aaa'] = "root";
        arr.push(null);
        arr[100] = "abcdefg";
        console.log(arr);
        console.log("数组长度："+arr.length);

        // 3. 遍历数组 arr2.length 获取数组的长度（索引的最大值+1）
        for(var i=0; i<arr.length;i++){
            console.log(arr[i]);
        }
        console.log("---------------------------");
        // index 数组的索引  in 关键字  arr要遍历的数组 
        for(var index in arr){
            console.log(arr[index]);
        }

        // 4. 删除
        delete arr['aaa'];
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>
  1. 函数
    相当于java中的方法
    使用函数
    1. 定义函数
    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>
    <script>
        // 1. 定义无参无返回值
        function func1(){
            console.log("无参无返回值");
        }
        // 调用
        func1();

        // 2. 有参无返回值
        function func2(name,age){
            console.log(name+"：有参无返回值:"+age);
        }
        // 调用
        func2("root",18);

        // 3. 无参有返回值
        function func3(){
            return "root";
        }
        // 调用
        var str = func3();
        console.log(str);

        // 4. 有参有返回值
        function func4(name,age,sex){
            var obj = {
                name: name,
                age: age,
                sex: sex
            }
            return obj;
        }
        // 调用
        var o = func4("小冰冰",18, "未知");
        console.log(o);
        // 5. 匿名函数
        var ff = function(){
            console.log("匿名函数");
        }
        // 调用
        ff();
    </script>
</head>
<body>
    
</body>
</html>
  1. 日期对象
    Date 日期对象：
    创建对象：var date = new Date()
    常见函数：
    date.getFullYear() 获取年
    date.getMonth() 获取月
    date.getDate(); 获取日
    date.getHours() 获取时
    date.getMinutes() 获取分
    date.getSeconds() 获取秒
  2. 数学对象
    Math 对数值操作对象
    常见函数
    console.log(Math.round(i)); // 四舍五入
    console.log(Math.ceil(i)); // 向上取整
    console.log(Math.floor(i)); // 向下取整
    console.log(Math.random()); // 随机数 [0,1)
    console.log(Math.max(10,3)); // 获取最大值
    console.log(Math.min(10,5)); // 获取最小值
    console.log(Math.abs(-10)); // 获取绝对值
  3. String
    String 字符串
    定义：
    var str = “”;
    var str1 = new String("")
    常见函数：
    str.length; 获取字符串长度
    str.startsWith(""); 是否以某个字符开头
    str.endsWith(""); 是否以某个字符结尾
    str.substring(起始索引,结束索引); 截取字符串
    str.substr(起始索引,截取长度); 截取字符串
    str.split(""); 拆分字符串 返回数组

事件

  1. 单击事件 onclick
  2. 双击事件 ondblclick
  3. 内容改变事件 onchange
  4. 鼠标获取和失去事件 onmouseover onmouseout
  5. 键盘抬起和按下事件 onkeydown onkeyup
  6. 获取和失去焦点事件 onfocus onblur
<!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>
    <script>
        // 1. 点击弹框
        function tan(){
            // 1. 弹对话框 alert()  停止   
            alert("弹框");
        }

        // 双击弹框
        function doubleTan(){
            // 2. 弹输入框  
            // prompt(参数1,参数2);    返回输入框中输入的值(字符串)
            // 参数1：提示信息  参数2：输入框的默认值
            var str = prompt("请输入你的启蒙老师","");
            console.log(str);
        }
        // 内容改变执行
        function getValues(){
            // 1. 根据id获取标签元素
            var inp = document.getElementById("inp");
            console.log(inp.value);
        }

        // 鼠标获取事件
        function getDiv(){
            // 1. 获取标签对象
            var d1 = document.getElementById("d1");
            d1.style.backgroundColor = "green";
        }
        // 鼠标失去事件
        function setDiv(){
            // 1. 获取标签对象
            var d1 = document.getElementById("d1");
            d1.style.backgroundColor = "blue";
        }

        // 键盘按下事件
        function down1(){
            console.log("键盘按下了");
        }

        // 键盘抬起
        function up1(){
            console.log("键盘抬起了"); 
        }

        // 失去焦点
        function getFocus(){
            console.log("获取焦点");
        }

        // 失去焦点

        function setBlur(){
            console.log("失去焦点");
        }
    </script>
</head>
<body>
    <button onclick="tan()">点击弹框</button>
    <button ondblclick="doubleTan()">双击</button>
    <input id="inp" type="text" onchange="getValues()"/>
    <div id="d1" onmouseover="getDiv()" onmouseout="setDiv()" style="width: 100px; height: 100px; border: 1px solid yellow;">

    </div>

    <input type="text" onkeydown="down1()" onkeyup="up1()"/>
    <input type="text" onfocus="getFocus()" onblur="setBlur()" />


</body>
</html>

常见弹框

  1. 弹提示框
    alert(提示信息) 特点：该函数执行页面停止 点击确定后继续执行
  2. 弹输入框
    prompt(提示输入信息,输入框默认中) 返回值：输入框输入的内容 内容类型是String类型
  3. 弹警告框
    confirm(警告信息) 返回值：boolean

DOM

标签元素操作

  1. 获取（查询）
    1. 根据id获取元素
      document。getElementById(“id值”);返回整个标签元素
    2. 根据class获取元素 document.getElementsByClassName(“class值”); 返回HTMLCollection
    3. 根据标签名获取元素
      document.getElementsByTagName(“标签名”);返回HTMLCollection
    4. 根据标签的name属性 获取元素
      document.getElementsByName(“name值”); 返回 NodeList
  2. 创建标签（增）
    创建元素标签
    document.createElement(“标签名”); 返回当前创建标签
    指定位置
    标签元素.appendChild(创建标签); 追加到某个标签的最后
    父标签.insertBefore(创建标签,参照标签); 指定位置插入
<!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>
    <script>
        // 创建img标签 并且加载图片
        function showImg(){
            // 1. 创建标签
            var body = document.getElementsByTagName("body");
            var img = document.createElement("img");  // 返回标签元素
            var b = document.getElementsByTagName("button");
            img.src = "images/1.jpg";
            // 2. 指定位置
            // body[0].appendChild(img);  // 将img追加到body的最后
            body[0].insertBefore(img, b[0]);  //  参数1：创建的元素  参数2：参照物
        }
    </script>
</head>
<body>
    <button onclick="showImg()">点击按钮显示图片</button>
</body>
</html>
  1. 删除标签
    ① 获取要删除的标签元素
    ② 标签元素.remove(); 自己删除自己
    父标签.removeChild(子标签); 通过父标签删除子标签
<!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>
    <script>
        // 删除的函数
        function deleteE(){
            // 1. 获取img 
            var imgs = document.getElementsByTagName("img");
            var bodys = document.getElementsByTagName("body");
            // 2. 删除标签
            // imgs[0].remove(); // 自己删除自己  
            bodys[0].removeChild(imgs[0]);
        }
    </script>
</head>
<body>
    <img src="images/smile.gif" /><br />
    <button onclick="deleteE()">点击删除img</button>
    
</body>
</html>
  1. 修改标签
    要修改标签元素.parentNode.replaceChild(修改后的标签,要修改的标签)
<!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>
    <script>
        // 修改标签
        function changeE(){
            // 1. 创建修改后的标签
            var h3 = document.createElement("h3");
            var h2s = document.getElementsByTagName("h2");
            // 2. 修改
            h2s[0].parentNode.replaceChild(h3, h2s[0]);

        }
    </script>
</head>
<body>
    <h2>首页</h2>
    <button onclick="changeE()">点击修改h2为h3</button>
</body>
</html>
标签中属性的操作
  1. 标签元素.属性名 = 值;
  2. 标签元素.setAttribute(“属性名”,“属性值”);
    标签元素.getAttribute(“属性名”); // 获取属性值
<!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>
    <script>
        function changeBook(num){
            // 1. 获取操作的元素
            var img = document.getElementsByTagName("img")[0];
            if(num==1){
                // img.src = "images/dog.jpg";
                img.setAttribute("src","images/dog.jpg"); 
                console.log(img.getAttribute("width")) ;  
            }else{
                img.src = "images/mai.jpg";
            }
        }
    </script>
</head>
<body>
    <button onclick="changeBook(1)">点击显示第一本书</button>
    <button onclick="changeBook(2)">点击显示第二本书</button><br />
    <img src="" width="200">
</body>
</html>
标签中内容的操作
  1. 获取双边标签中的内容
    标签元素.innerHTML // 获取标签中的所有内容（包括文本和子标签）
    标签元素.innerText // 获取标签中的文本内容
  2. 获取input 中的内容
    标签元素.value
标签中样式的操作
  1. 标签元素.style.样式名 = 样式值 // 一个一个样式设置
  2. 标签元素.setAttribute(“class”,“值”); // 将一个class选择器样式设置
<!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>
    <style>
        .xx{
            width: 300px;
            height: 300px;
            border: 1px solid pink;
            background-color: red;
        }
    </style>
    <script>
        function changeStyle(){
            // 1. 获取div 
            var d1 = document.getElementById("d1");
            // d1.style.backgroundColor = "yellow";
            // d1.style.display = "inline-block";
            // d1.style.fontSize = "20px"

            d1.setAttribute("class","xx");
        }
    </script>
</head>
<body>
    <div id="d1">
        哈哈
    </div>
    <button onclick="changeStyle()">点击改变样式</button>
</body>
</html>

BOM（对浏览器操作）

windows对象的使用
  1. window对象的子对象
    1. document 操作元素标签
    2. History 页面历史记录
    3. Location对象 浏览器访问的地址 相当于a
    4. Navigator 包含了浏览器的相关信息
    5. Screen 浏览器屏幕信息
  2. 使用window可以省略
    window.document // 获取document对象
    window.alert() // 弹提示框
    window.prompt() // 弹输入框
    window.comfirm() // 弹警告框
  3. 定时器
    1. 一次性定时器 window可以省略
      创建定时器：var id =window.setTimeout(“action1()”, 3000);
      参数1：执行的动作 参数2：时间
      清除定时器：window.clearTimeout(id);
      参数：定时器对象
    2. 循环定时器
      ① 创建定时器
      setInterVal(“间隔时间执行的动作”,间隔时间单位ms);
      ② 清除定时器
      clearInterVal(定时器对象);
<!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>
    <script>
      var id;
      function tan3() {
        // 1. 创建定时器(一次性定时器)
        id = window.setTimeout("action1()", 3000); // 参数1：执行的动作  参数2：时间
      }

      function action1() {
        alert("点我干啥");
      }

      function clear1() {
        // 2. 清除定时器
        window.clearTimeout(id);
      }
      var dd;
      function showClock() {
        // 1. 创建循环定时器 参数1：执行的动作 参数2：时间间隔 单位：ms
        dd = window.setInterval("getTime1()", 1000);
      }
      
      function getTime1() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDay(); // 当周的第几天
        var d = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        // console.log(hours+":"+minutes+":"+seconds);
        var str =year +"年" +month + "月" +d +"日" +" " +hours +"时" +minutes +"分" + seconds +"秒";
        document.getElementById("d1").innerHTML = str;
      }
      var flag = true;  // 默认时钟动起来的
      
      function stopClock(){
            var inp = document.getElementById("inp");
            if(flag){
                // 2. 清除循环定时器 参数：定时器对象
                clearInterval(dd);
                // 按钮的状态改变
                inp.value = "点击启动时钟";

                flag = false;
            }else{
               // 启动 时钟
               showClock();
                // 按钮的状态改变
                inp.value = "点击停止时钟";
                // 改变标记
                flag = true;
            }       
      }
    </script>
  </head>
  <body>
    <button onclick="tan3()">点击三秒弹框</button>
    <button onclick="clear1()">清除一次性定时器</button>
    <div id="d1"></div>
    <input onclick="showClock()" type="button" value="点击显示时钟" />
    <input id="inp" onclick="stopClock()" type="button" value="点击停止时钟" />
  </body>
</html>
History
  1. history.forward();页面前进
  2. history.back();页面后退
<!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>
    <script>
        function forword1(){
            window.history.forward(); // 前进
        }

        function back1(){
            window.history.back(); // 后退
        }
    </script>
</head>
<body>
    <button onclick="forword1()">前进</button>
    <button onclick="back1()">后退</button>
    <a href="https://www.baidu.com">点击去百度</a>
</body>
</html>
location
  1. 页面刷新
    window.location.reload(); // 刷新
  2. 实现页面跳转
    location.href = “路径”;
<!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>
    <script>
        function forword1(){
            window.history.forward(); // 前进
        }

        function back1(){
            window.history.back(); // 后退
        }

        function flush1(){
            window.location.reload(); // 刷新
        }

        function jump1(){
            window.location.href = "12-bom定时器.html";
        }

    </script>
</head>
<body>
    <button onclick="forword1()">前进</button>
    <button onclick="back1()">后退</button>
    <a href="https://www.baidu.com">点击去百度</a>

    <button onclick="flush1()">点击刷新当前页面</button>

    <button onclick="jump1()">点击跳转页面</button>
</body>
</html>
别悲^_^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javaScript
03-09
Java脚本
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 75万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript简介
wsdhy_的博客
04-02 4428
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
JavaWeb—JavaScript
weixin_61843013的博客
06-25 7713
JavaScript的使用
JavaScript看这一篇就够了，简单全面一发入魂
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
JavaScript事件基础
JiuMeilove的博客
04-28 2万+
JavaScript事件概述 JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测道德行为 简单的理解为:触发—响应机制 网页中国每个元素都可以产生某些可以触发JavaScript的事件,例如我们可以在用户点击某个按钮时产生一个事件然后去执行某些操作 JavaScript事件的三要素 JavaScript事件又三分部组成 事件源 被触发的对象 事件类型__如何触发/什么事件 事件处理器__通过一个函数赋值的方式完成 <body> <butto
Javascript
03-22
javascript-examples JavaScript网页程式设计
JavaScript入门
03-04
JavaScript入门
Day43
最新发布
m0_67496588的博客
06-20 523
JSON，Ajax
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1488
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 352
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
mqiqe的专栏
06-14 331
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值