Vue.js 极简小例:数值计算、千米换算为米、九九乘法表、循环
生活随笔
收集整理的這篇文章主要介紹了
Vue.js 极简小例:数值计算、千米换算为米、九九乘法表、循环
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前些天發(fā)現(xiàn)了一個(gè)巨牛的人工智能學(xué)習(xí)網(wǎng)站,通俗易懂,風(fēng)趣幽默,忍不住分享一下給大家。點(diǎn)擊跳轉(zhuǎn)到教程。
代碼:
<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/><!-- 數(shù)值計(jì)算 --><p>計(jì)數(shù)器: {{ counter }}</p><button @click = "counter +=2">點(diǎn)一下就自增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/> <!-- 整數(shù)范圍內(nèi)迭代 --><!-- <li v-for="n in 10" :key="n"> --><!-- 數(shù)組迭代 --><li v-for="n in [1,3,5]" :key="n">{{ n }}</li><br/> <br/> <!-- 迭代對(duì)象屬性 鍵值對(duì) --><ul><li v-for="(value, key) in 小熊" :key="value">{{ key }} : {{ value }}</li></ul><br/> <br/> <!-- 迭代對(duì)象屬性 --><ul><li v-for="value in 小熊" :key="value">{{ value }}</li></ul> <br/> <br/> <!-- 第三個(gè)參數(shù)為索引 --><ul><li v-for="(value, key, index) in 小熊" :key="value">{{ index }}. {{ key }} : {{ value }}</li></ul><br/> <br/> <!-- 帶模板的循環(huán) --><ul v-for="site in sites" :key="site"><li>{{ site.name }}</li><li>--------------</li></ul><br/> <br/> <!-- 簡(jiǎn)單循環(huán) --><ol><li v-for="site in sites" :key="site">{{ site.name }}</li></ol><!-- 根據(jù)ok的值確定是否顯示數(shù)據(jù) --><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: '文文樂(lè)園' },{ name: '怕血的小蚊子' },{ name: '火魔滅世' }],小熊: {昵稱: '微風(fēng)輕許',網(wǎng)址: '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>?
運(yùn)行效果:
?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的Vue.js 极简小例:数值计算、千米换算为米、九九乘法表、循环的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: PostMessage和sendMess
- 下一篇: vue 实现瀑布流布局的 组件/插件总汇