Vue.js 極簡小例:數值計算、千米換算為米、九九乘法表、循環

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。

代碼:

<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>

?

運行效果:

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/448423.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/448423.shtml
英文地址,請注明出處:http://en.pswp.cn/news/448423.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

shiro框架的學習

權限控制是shiro最核心的東西 Shiro權限聲明通常是使用以冒號分隔的表達式。一個權限表達式可以清晰的指定資源類型&#xff0c;允許的操作&#xff0c;可訪問的數據。同時&#xff0c;Shiro權限表達式支持簡單的通配符&#xff0c;可以更加靈活的進行權限設置。 下面以實例來說…

C++之內聯函數

內聯函數是一種特殊的函數&#xff0c;具有普通函數的特征&#xff08;參數檢查&#xff0c;返回類型等&#xff09; 內聯函數是對編譯器的一種請求&#xff0c;因此編譯器可能拒絕這種請求 內聯函數由 編譯器處理&#xff0c;直接將編譯后的函數體插入調用的地方 宏代碼片段…

媽媽培養天才的13絕招

作父母的&#xff0c;都希望自己的寶寶可以變得聰明、懂事&#xff0c;所以想盡辦法去讓寶寶上早教班、做早期智力開發……當然&#xff0c;這些做法對于開發寶寶智力能夠起到一定的幫助。但是&#xff0c;千萬別忽視您所能給予寶寶的家庭教育。    近日&#xff0c;日本一位…

Vue.js 極簡小例: 4 種方式樣式綁定、style 的多種方式實現

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 代碼&#xff1a; <template><div id"app"><!-- JSON方式使用樣式 --><div v-bind:style"{ colo…

C++之默認參數

一、什么是默認參數 C中可以在函數聲明時為參數提供一個默認值&#xff0c; 當函數調用時沒有指定這個參數的值&#xff0c;編譯器會自動用默認值代替 二、默認參數規則 只有參數列表后面部分的參數才可以提供默認參數值 一旦在一個函數調用中開始使用默認參數值&#xff…

50 Python - 裝飾器 類定義裝飾器

04 類定義裝飾器 上節通過函數定義裝飾器&#xff0c;本節通過類定義裝飾器 001 定義類裝飾器 定義一個類&#xff0c;類里面兩個函數&#xff0c;一個構造函數init()&#xff0c;一個調用函數call() 構造函數init時候&#xff0c;傳遞一個函數func()進來 調用函數call()&#…

C++之過載函數

過載函數的定義&#xff1a; 用同一個函數名定義不同的函數 當函數名和不同的參數搭配時函數的含義不同 過載函數的判斷標準&#xff1a; 函數重載至少滿足下面的一個條件&#xff1a; 參數個數不同 參數類型不同 參數順序不同 函數返回值不是函數重載的判斷標準 調用…

人民幣貶值會讓八類人損失慘重!有你嗎?

截至20日&#xff0c;人民幣本周對美元累計貶值1.24%&#xff0c;年初以來不到三個月時間累計貶值2.79%。分析人士表示&#xff0c;人民幣短期內仍有較強下跌壓力。本輪人民幣急貶預計將對幾類人群收入造成嚴重沖擊。 本周以來&#xff0c;人民幣對美元即期匯價持續單邊下跌。數…

Vue.js 極簡小例: 點擊事件

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 代碼&#xff1a; <template><div> <!-- jy_mothed 是在 js 中自定義的方法 --><button v-on:click"jy_mot…

從最大似然估計到最小二乘法

這一部分內容和吳恩達老師的CS229前面的部分基本一致&#xff0c;不過那是很久之前看的了&#xff0c;我盡可能寫的像吳恩達老師那樣思路縝密。 1.假設 之前我們了解過最大似然估計就是最大化似然函數$$L(\theta) \sum log(p(x_{i}|\theta))$$ 來確定參數\(\theta\)&#xff0…

C++之類

A&#xff09;封裝&#xff0c;是面向對象程序設計最基本的特性。把數據&#xff08;屬性&#xff09;和函數&#xff08;操作&#xff09;合成一個整體&#xff0c;這在計算機世界中是用類與對象實現的。 B&#xff09;封裝&#xff0c;把客觀事物封裝成抽象的類&#xff0c;…

APU(美國AMD公司研發的加速處理器)

APU(Accelerated Processing Unit)中文名字叫加速處理器&#xff0c;是AMD“融聚未來”理念的產品&#xff0c;它第一次將中央處理器和獨顯核心做在一個晶片上&#xff0c;它同時具有高性能處理器和最新獨立顯卡的處理性能&#xff0c;支持DX11游戲和最新應用的“加速運算”&am…

根本不值得一提的乒乓球國手王浩

最近在看世界乒乓球錦標賽&#xff0c;關于王浩&#xff0c;很多人都說他的技術開創了一個時代&#xff0c;而事實是王浩沒有奪過任何世界性大的賽事的單打冠軍&#xff0c;我所說的世界性的賽事包括&#xff1a;世界乒乓球錦標賽,奧運會&#xff0c;世界杯&#xff0c;國際乒聯…

Vue.js 極簡小例:表單 (輸入框 input、文本域 textarea、單選框 radio、下拉菜單 selected、復選框 checkbox)

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 代碼&#xff1a; <template> <div > <p>---------------------------------------------------------------------…

C++之構造函數和析構函數

一、構造函數 1. 構造函數的定義&#xff1a; 1&#xff09;C中的類可以定義與類名相同的特殊成員函數&#xff0c;這種與類名相同的成員函數叫做構造函數&#xff1b; 2&#xff09;構造函數在定義時可以有參數&#xff1b; 3&#xff09;沒有任何返回類型的聲明。 2. 構…

顯卡常識 電腦顯卡基礎知識普及

我們組裝電腦的時候肯定需要考慮到顯卡性能&#xff0c;如果電腦配置中的顯卡性能不行&#xff0c;那么電腦肯定玩不了大型游戲。可能一些新電腦用戶對顯卡一點也不了解&#xff0c;我們下面來詳細介紹一下電腦顯卡的基礎知識。 一、顯卡簡介 顯卡是個人電腦最基本組成部分之一…

操縱瀏覽器歷史記錄 : popstate() 、 history.pushState() 、 window.history.pushState()

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 一、歷史記錄前進與后退 1.后退&#xff1a; window.history.back() -- 相當于用戶在瀏覽器的工具欄上點擊返回按鈕&#xff1b; 2.前…

C++之拷貝函數

拷貝構造函數是一種特殊的構造函數&#xff0c;函數的名稱必須和類名稱一致&#xff0c;它的唯一的一個參數是本類型的一個引用變量&#xff0c;該參數是const類型&#xff0c;不可變的。例如&#xff1a;類X的拷貝構造函數的形式為X(X& x)。 以下情況都會調用拷貝構造函數…

spring Boot 學習(七、Spring Boot與開發熱部署)

一、熱部署在開發中我們修改一個Java文件后想看到效果不得不重啟應用&#xff0c;這導致大量時間 花費&#xff0c;我們希望不重啟應用的情況下&#xff0c;程序可以自動部署&#xff08;熱部署&#xff09;。有以下四 種情況&#xff0c;如何能實現熱部署。?1、模板引擎 – 在…