VUE.js 極簡小例:數值計算、千米換算為米、九九乘法表、迴圈
阿新 • • 發佈:2018-11-19
程式碼:
<template> <div id="app"> <!-- 千米和米換算 --> <div id = "computed_props"> <input type = "text" v-model = "kilometers"> 千米= <input type = "text" v-model = "meters">米 </div> <p id="info"></p> <br/> <!-- 數值計算 --> <p>計數器: {{ counter }}</p> <button @click = "counter +=2">點一下就自增2</button> <br/> <br/> <br/> <!-- 九九乘法表 --> <div v-for="n in 9" :key="n" style = "font-size:25px; color:green"> <b v-for="m in n" :key="m"> {{m}}*{{n}}={{m*n}} </b> </div> <br/> <br/> <!-- 整數範圍內迭代 --> <!-- <li v-for="n in 10" :key="n"> --> <!-- 陣列迭代 --> <li v-for="n in [1,3,5]" :key="n"> {{ n }} </li> <br/> <br/> <!-- 迭代物件屬性 鍵值對 --> <ul> <li v-for="(value, key) in 小熊" :key="value"> {{ key }} : {{ value }} </li> </ul> <br/> <br/> <!-- 迭代物件屬性 --> <ul> <li v-for="value in 小熊" :key="value"> {{ value }} </li> </ul> <br/> <br/> <!-- 第三個引數為索引 --> <ul> <li v-for="(value, key, index) in 小熊" :key="value"> {{ index }}. {{ key }} : {{ value }} </li> </ul> <br/> <br/> <!-- 帶模板的迴圈 --> <ul v-for="site in sites" :key="site"> <li>{{ site.name }}</li> <li>--------------</li> </ul> <br/> <br/> <!-- 簡單迴圈 --> <ol> <li v-for="site in sites" :key="site"> {{ site.name }} </li> </ol> <!-- 根據ok的值確定是否顯示資料 --> <div v-show="ok">為true就顯示</div> <br/> <!-- 多條件判斷 --> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> </template> <script> export default { name: 'app', data () { return { kilometers : 0, meters:0, counter: 1, type: 'A', ok:false, sites: [ { name: '文文樂園' }, { name: '怕血的小蚊子' }, { name: '火魔滅世' } ], 小熊: { 暱稱: '微風輕許', 網址: 'https://blog.csdn.net/jiangyu1013', 描述: '我的日常筆記' } } }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = val * 1000; }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } } </script>
執行效果: