日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) > 前端技术 > vue >内容正文

vue

Vue.js 极简小例:数值计算、千米换算为米、九九乘法表、循环

發(fā)布時(shí)間:2023/12/18 vue 36 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。