3.3.1、todoList(输入内容显示在输入框下)

  1. <input type="text" id="input">
  2.     <ul id="app">
  3.     </ul>
  4.     <script>
  5.         var arr = [];
  6.         var input = document.getElementById("input");
  7.         var app = document.getElementById("app");
  8.         input.onkeydown = function(event){
  9.             if(event.keyCode == 13){
  10.                 if(arr.indexOf(this.value) == -1 && this.value!=""){
  11.                 arr.push(this.value);
  12.                 var li = document.createElement("li");
  13.                 li.innerHTML = this.value;
  14.                 app.append(li);
  15.                 }
  16.             }
  17.         }
  18.     </script>

3.3.2、data

  1.  <script>
  2.         var obj =[
  3.             {name:"chang",age:18,skill:"vue"},
  4.             {name:"li",age:17,skill:"js"},
  5.             {name:"zhang",age:16,skill:"html"},
  6.         ]
  7.         var arr = [];
  8.         for(var i=0;i<obj.length;i++){
  9.             var name = obj[i].name;
  10.             var skill = obj[i].skill;
  11.             arr.push({
  12.                 name:name,
  13.                 skill:skill
  14.             })
  15.         }
  16.         console.log(arr);
  17.     </script>

3.3.3、解构

  1.  var obj = {name:"lisi",age:18,skill:"vue",
  2.         s:{
  3.             sex:"male"
  4.         }
  5.     };
  6.         // var name = obj.name;
  7.         // var age = obj.age;
  8.         // var skill = obj.skill;
  9.         var {name,s} = obj;
  10.         console.log(name)
  11.         console.log(s.sex)
  1.  var obj =[
  2.             {name:"chang",age:18,skill:"vue"},
  3.             {name:"li",age:17,skill:"js"},
  4.             {name:"zhang",age:16,skill:"html"},
  5.         ]
  6.         for(var i=0;i<obj.length;i++){
  7.             var {name,skill} = obj[i];
  8.             arr.push({
  9.                 name,
  10.                 skill
  11.             })
  12.         }
  13.         console.log(arr);

3.3.4、tab

  1. <style>
  2.         .parent{
  3.             width:200px;
  4.             height:200px;
  5.             border: 1px solid #333;
  6.             position: relative;
  7.         }
  8.         .parent>div{
  9.             width:100%;
  10.             height:100%;
  11.             position: absolute;
  12.         }
  13.         .html{
  14.             background-color: red;
  15.             z-index:100;
  16.         }
  17.         .css{
  18.             background-color: yellow;
  19.         }
  20.         .current{
  21.             color: orange;
  22.         }
  23.         li{
  24.             cursor:pointer;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <ul>
  30.         <li class="current">html</li>
  31.         <li>css</li>
  32.     </ul>
  33.     <div class="parent"> 
  34.         <div class="html">
  35.             html
  36.         </div>
  37.         <div class="css">
  38.              css
  39.         </div>
  40.     </div>
  41.     <script>
  42.         var lis = document.getElementsByTagName("li");
  43.         var divs = document.querySelectorAll(".parent div");
  45.         for(let i=0;i<lis.length;i++){
  46.             lis[i].index = i;
  47.             lis[i].onclick = function(){
  48.                 // 1.让所有的li移除class=“current”
  49.                 for(let i=0;i<lis.length;i++){
  50.                     lis[i].classList.remove("current");
  51.                 }
  52.                 // 2.让当前元素添加class="current"
  53.                 this.classList.add("current")
  54.                 console.log(this.index)
  56.                 // 3. 让所有div隐藏
  57.                 for(let i=0;i<divs.length;i++){
  58.                     divs[i].style.display = "none"
  59.                  }
  60.                 // 4. 让对应的下标的div显示
  61.                 divs[this.index].style.display = "block";
  63.                 }
  64.             }
  67.     </script>