開發過中程常常會有上傳檔案的功能,上傳完之後也要可以馬上去 preview image 的情況,此時我們可以透過 files
來作到我們想要的效果 ↓
<form>
<input @change="getFile($event)" type="file" id='upload_file'/>
<img v-if='url' :src="url" />
</form>
在 input onchange 的時候觸發的事件,在此事件中取得 files
export default {
setup(){
let url = ref('')
const getFile = ($event)=> {
const file = $event.target.files[0]
url.value = URL.createObjectURL(file); //把上傳檔案的 image url 傳入
}
return {getFile,url}
}
}
JS30 Day 5 - Flex Panel Gallery 用CSS與JS來製作一個點擊後會動畫展開的圖片展示效果, 運用到了CSS的flex、transform、transition.. 這篇比較偏向css知識! 特別運動 transitionend event 來觸發 className ,讓動畫面更流暢 // <div class="panels"> // <div class="panel panel1"> // ...
Dec 1, 2022在其他以類別為基礎的程式語言中,this指的是目前使用類別進行實體化的物件。而JavaScript語言中因為在設計上並不是以類別為基礎的物件導向,設計上不一樣,所以this的指向的是目前呼叫函式或方法的擁有者(owner)物件,也就是說它與函式如何被呼叫或調用有關,雖然是同一函式的呼叫,因為不同的物件呼叫,也有可能是不同的this值。 函式的呼叫 不論是在物件中的方法,或是一般的函式,每個函式中都有this值。以下是一個很簡單的範例,一個是我們所認知的普通函式,一個是在物件中的方法: function func(param1, param2){ console.log(this) } const objA = {
Dec 1, 2022初次見面 JavaScript 的正規式是一個內建的物件,其建構函數(Construction functoin)為 RegExp,典型用法如下: re = new RegExp("pattern", "flag") 上述用法也可以寫成: re = /pattern/flag 其中,pattern 代表以正規表示法來顯示的字串,flag 則是比對的方式。flag 的值可能有三種,分別解釋如下:
Dec 1, 2022Program/Process/Thread 是作業系統(Operating System)很重要的概念,同時也是新鮮人面試時經常會被問到的題目。 Program(程式) 相同 Program 的 Process 可以多個同時存在。 Program 意旨軟體工程師在 IDE、editor等所寫的程式碼(code),也就是說還尚未load入記憶體的 code,我們稱之為Program。我們也可以想像成軟體開發者就如同建築師,要設計一座工廠,而這座工廠要如何建造、規劃的藍圖就是 Program。 Process ( 程序、進程 ) Process 意旨已經執行並且 load 到記憶體中的 Program ,程序中的每一行程式碼隨時都有可能被CPU執行。在實際生活中,點開應用程式就是將 Program 活化成 Process ,因此我們可以在活動監控器(mac)中看到PID,也就是執行中的Process 。連結 Program 的想像,Process 就是實體的工廠,照著 Program 這張設計藍圖所完成的工廠。
Dec 1, 2022or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up