標籤彙整:JacaSceipt

【Vue.js】v-model 雙向綁定

說明

v-model的功能:
使用者輸入資料→JS物件同步更新→及時渲染

用法:v-model=”變數名稱”

範例

同步更新文字

#app
 label 姓名:
 input(v-model="name")

/********************/

h4 您好,{{name}}
var vm=new Vue({
 el: "#app",
 data: {
  name: "陳怡安"
 }
});

同步更新style

#app
 label 顏色:
 input(v-model="color")
/********************/

p 下面這個方塊的顏色是【{{color}}】
.block(style="background-color: {{color}}")
.block
 border: 1px solid #000
 width: 40px
 height: 40px
var vm=new Vue({
 el: "#app",
 data: {
  color: "#C0C999"
 }
});

陣列用法

#app
 p 喜歡的書:
 //渲染3次
 div(v-for="(id, book) in books")
  label 【{{id+1}}】
 //印出書名
  input(v-model="book")
 
/******************/
p 喜歡的書
 ul 
 li(v-for="book in books") {{book}}
var vm=new Vue({
 el: "#app",
 data: {
  books: ["雨天的艾莉絲", "鋼鍊", "天地明察"]
 }
});

Display

CODEPEN

 

動畫收合:fadeIn(), slideDown(), fadeToggle(), slideToggle()

fadeIn()  fadeOut()

淡入與淡出

等於加上opacity的動態變化

功能介紹:點開任一PROBLEM後,點選其他PROBLEM會産生

  1. 原ANSWER收合
  2. 新ANSWER展開
撰寫方法:命令系統在每次點擊時執行
  1. 收合所有ANSWER
  2. 展開指定ASNWER
ul
 li
  div.problem PROBLEM A
  div.ans ANSWER A
 li
  div.problem PROBLEM B
  div.ans ANSWER B
 li
  div.problem PROBLEM C
  div.ans ANSWER C
 li
  div.problem PROBLEM D
  div.ans ANSWER D
ul
 display: inline-block  
li
 display: block
 margin: 10px   

.problem
 padding: 10px 15px 10px 15px
 background-color: #90a955
 color: #fff    
.ans
 padding: 15px
 background-color: #ebf9de
 display: none
$("li").click(
 function() {
  //淡出關閉所有answer
  $(".ans").fadeOut();
  //打開指定的answer
  $(this).find(".ans").fadeIn();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

slideDown()  slideUp()

滑下與滑上

等於加上height的動態變化

//CSS HTML同上
$("li").click(
 function() {
  //滑上關閉所有answer
  $(".ans").slideUp();
  //滑下打開指定的answer
  $(this).find(".ans").slideDown();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

fadeToggle

淡出的開關

點一下PROBLEM打開,再點一下收起來

//CSS HTML同上
$("li").click(
 function() {
  $(this).find(".ans").fadeToggle();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

slideToggle

滑出的開關

點一下PROBLEM打開,再點一下收起來

//CSS HTML同上
$("li").click(
 function() {
  $(this).find(".ans").slideToggle();
 }
);

在網頁編輯器上使用KhanAcademy的JS語法 ProcessingJS

一般編輯器無法顯示KhanAcademy的JS語法原因

  1. 未設定Processing.js函式庫
    https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js
  2. 沒有在html寫canvas標籤

 解決方法

canvas#mycanvas
var sketchProc = function(processingInstance) {
     with (processingInstance) {
        size(400, 400); 
        frameRate(30);
        
        // 這邊貼上KhanAcademy的JS程式碼
    
    }};

    // Get the canvas that Processing-js will use
    var canvas = document.getElementById("mycanvas"); 
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc);