Vue practice Record (JS/CSS) 1

Contrast cn.vuejs.org/v2/examples…

input

  1. Click on the input

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

    In the outline value, focus is none

  2. One of the border

    Border-style must be before border-color; otherwise, the border color is abnormal

    border-style: solid;
border-color:pink;
Copy the code

  3. @keyup.enter

    The @keyup.enter event is triggered by hitting the Enter key on a PC, and the ENTER key on a mobile phone.

  4. Input checkbox click: @change event, :checked

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

button

  1. Delete the data

    this.list.splice(index,1)
Copy the code

    The splice() method adds/removes items from the array and then returns the deleted items, changing the original array

    grammar

    arrayObject.splice(index,howmany,item1,.. ,itemX)Copy the code
    parameter describe
    index A necessity. Integer to specify where items are added/removed, and negative numbers to specify positions from the end of the array.
    howmany A necessity. Number of items to delete. If set to 0, the project will not be deleted.
    item1, … , itemX Optional. The new item added to the array.

For loops and class judgments

  1. The for loop

    1. v-for

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

      Item is the object,

    2. :class

      :class="item.isCheck? 'end': 'start'"
Copy the code

      If isCheck is true and class is end,

<! Features: Task list Management Time: 07/06, 2021 10:12:01 Version: V1.0 <div class="head"> <h1> This is a todomvc exercise </h1> <div class="content"> <input type="text" <div style="margin-left:462px"> <ul style="margin-left:462px" 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)" > x < / button > < / li > < / ul > < / div > < div v - if = "show" style = "display: inline - flex; justify-content: space-around; </button> </div> </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>Copy the code

Summary: Filtering is not yet implemented