css/js练习

vue练习记录(js/css）1

对照https://cn.vuejs.org/v2/examples/todomvc.html的功能

input

1. 点击input

   input[type = text]:focus{
       outline: none;
       border:2px solid rgb(243, 109, 109) ;
     }
   

   其中outline为none，focus才有效果

2. 其中的border

   border-style需要在border-color前，否则边框颜色不正常

   border-style: solid;
   border-color:pink;
   

3. @keyup.enter

   @keyup.enter事件则是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。

4. input的checkbox的点击：@change事件、:checked

   <input type="checkbox" :checked="item.isCheck" @change="check(item)"/>
   

button

1. 删除数据

   this.list.splice(index,1)
   

   splice() 方法向数组中添加/删除项目，然后返回被删除的项目，改变原始数组

   语法

   arrayObject.splice(index,howmany,item1,..,itemX)
   

   参数	描述
   index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
   howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
   item1, …, itemX	可选。向数组添加的新项目。

for循环和class判断

1. for循环

   1. v-for

      v-for="(item,index) in list"
      

      item为对象，

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-smKKSrF4-1625638663061)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20210706153816730.png)]

   2. :class

      :class="item.isCheck? 'end': 'start'"
      

      若isCheck为true，class为end，

<!--
  功能：任务清单管理
  时间：2021年07月06日 10:12:01
  版本：v1.0
  修改记录：
  修改内容：
-->
<template>
  <div id="app">
    <div class="head">
      <h1>这是一个todomvc练习</h1>
    </div>
    <div class="content">
      <input  
        type="text"
        class="searchinp"
        placeholder="现在需要干嘛"
        @keyup.enter="getmsg()"
        v-model="msg"
      />
      <div style="margin-left:462px">
        <ul class="ulsy" v-if="show">         
          <li v-for="(item,index) in list" :class="item.isCheck? 'end': 'start'"  :key="index" >
            <input 
              type="checkbox"
              class="chesy"
              :checked="item.isCheck"
              @change="check(item)"
            />
            {{item.msg}}
            <button @click="del(index)">×</button>
          </li>
        </ul>
      </div>
      <div v-if="show" style="display:inline-flex;justify-content: space-around;width:400px">
        <button @click="allsele">展示全部</button>
        <button>展示已完成</button>
        <button>展示未完成</button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return{
      msg:null,
      show:false,
      list:[],
    }
  },
  methods:{
    getmsg(){
      this.show = true;
      console.log(this.show)
      this.list.push({
        msg:this.msg,
        isCheck: false,
      })
      this.msg = ''
    },   
    check(item){
      item.isCheck = !item.isCheck;
      console.log(item)
    },
    del(index){
      this.list.splice(index,1)
    },
    allsele(item){
      for(let i = 0; i < this.list.length ; i++){
        item.isCheck = true;
        console.log(item.isCheck)
      }
    }
  },
  computed:{
  }
}
</script>
<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.head{
  color: #e9e;
}
.content{
  .searchinp{
    width: 400px;
    height: 50px;
    padding-left: 20px;
    font-size: 20px;
    border-style: solid;
    border-color:pink;
    color: plum;
  }
  input[type = text]:focus{
    outline: none;
    border:2px solid rgb(100, 167, 184) ;
  }
  input[type = text]::placeholder{
    color:lightblue;
    opacity: 0.5;
    font-size: 20px;
  }
  .ulsy{
    margin: 0;
    list-style: none;
    padding-left: 24px;
    width: 400px;
    border: 1px solid #ddd;
    li{
      height: 30px;
      line-height: 30px;
    }
    .end{
      color: plum;
      text-decoration: line-through;
    }
    .start{
      color: wheat;
    }
  }
}
</style>

总结：筛选功能还未实现