vue入門學習的幾個小栗子
阿新 • • 發佈：2020-07-20
目錄
通過按鈕控制盒子顯示或隱藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .box{ width: 100px; height: 100px; background-color: aqua; } </style> </head> <body> <div id="app"> <button class="btn" type="button" @click="bool = !bool">顯示/隱藏</button> <!-- <div class="box" v-if="bool"> --> <div class="box" v-show="bool"></div> </div> <script type="text/javascript"> new Vue({ el:'#app', data:{ bool:true } }) </script> </body> </html>
通過點選，動態改變某個標題背景顏色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> li{ width: 100px; margin: 10px; } li.active{ background-color: #FFFF00; } </style> </head> <body> <div id="app"> <ul> <li v-for="(item,key) in titles" :key="key" :class="{active:index==key}" @click="run(key)"> {{item}}--{{key}} </li> </ul> </div> <script> new Vue({ el:'#app', data:{ titles:['歷史','旅遊','娛樂','電影'], index:0 }, methods:{ run(key){ this.index = key } } }) </script> </body> </html>
簡單的計算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- num1 --> <input type="text" class="num1" v-model="num1"> <!-- op --> <select class="op" v-model="op"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <!-- num2 --> <input type="text" class="num2" v-model="num2"> <!-- = --> <button @click="run">=</button> <!-- res --> <input type="text" class="res" v-model="res"> </div> <script> new Vue({ el:'#app', data:{ num1:0, num2:0, res:0, op:'+' }, methods:{ run(){ this.res = eval(parseFloat(this.num1)+this.op+parseFloat(this.num2)) } } }) </script> </body> </html>