CSS and JS Exercises (2)

Vue practice Record (JS/CSS) 2

With reference to cn.vuejs.org/v2/examples…

Js controls the display or hiding of checkbox or Li elements

  1. Select all

  2. To cancel all

  3. All show

  4. Selected show

  5. Unselected display

  6. Methods to summarize

    • If the input is of type checkbox, change its state with @change; Bind click status: Checked;

    • Select all — all isCheck is true; Deselect all — all is false; Display all — display true;

    • The project has three ul, click the button to switch, v-show alshow has three values, including 1- all, 2- finished, 3- unfinished, and then create two arrays (endList, startList) for finished and unfinished data storage, which is obtained from the list traversal

    • Traversal — forEach method

      • this.list.forEach((item) => {
	if(){}
})
Copy the code

  7. The total code

    <! 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"> <div style="margin-left: 462px"> <ul class="ulsy" v-show="alshow == 1"> <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 > <! <ul class="ulsy" v-show="alshow == 2"> <li v-for="(item, index) in endList" :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 > <! --> <ul class="ulsy" v-show="alshow == 3"> <li v-for="(item, index) in startList" :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 @click="allcan"> < button@click =" allSUC "> </button> < button@click ="allno"> </button> </div> </div> </template> <script> Export default {name: "App", data() {return {MSG: null, show: false, list: [], // endList: [], // finish startList: [], // not done alshow: 1, // 1 all 2 done 3 not done}; }, methods: { getmsg() { this.show = true; Console. log(" Successfully inserted data "); this.list.push({ msg: this.msg, isCheck: false, }); this.msg = ""; }, check(item) { item.isCheck = ! item.isCheck; console.log(item.isCheck); }, del(index) { this.list.splice(index, 1); }, allsele() { for (var i = 0; i < this.list.length; i++) { this.list[i].isCheck = true; console.log(this.list[i]); } }, // allcan() { for(var i = 0; i < this.list.length ; i++){ // this.list.item.isCheck = true; this.list[i].isCheck = false console.log(this.list[i]) } }, allshow() { for (var i = 0; i < this.list.length; i++) { if (this.list[i] ! = null) { this.alshow = true; console.log(this.list); } } }, allsuc() { this.alshow = 2; const end = []; this.list.forEach((item) => { if (item.isCheck) { end.push(item); }}); this.endList = end; }, // All unfinished button events allno() {this.alshow = 3; const start = []; this.list.forEach((item) => { if (! item.isCheck) { start.push(item); }}); this.startList = start; console.log("----"); console.log(this.alshow); }, }, 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