v-if/v-else/v-else-if都是用於邏輯判斷。
當值為true的時候元素會被插入，當值為false的時候，元素會被刪除。
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
script
src="vue.min.js"
>
script
>
<
script
src=""
>
script
>
head
>
<
body
>
<
div
id>
<
h3 v-if
="show"
>顯示這段文字
h3>
<
h3 v-else
>沒有顯示這段文字
h3>
<
h3>}
h3>
div>
<
script
>
var=
newvue(
})script
>
body
>
html
>
v-bind用於動態更新html元素上面的屬性。
v-on用來繫結事件監聽.
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
script
src="vue.min.js"
>
script
>
<
script
src=""
>
script
>
head
>
<
body
>
<
div
id>
<
div
v-show
="show"
>這是一段測試文字
div>
<
button
v-on:click
="handlehide"
>點選隱藏
button
>
div>
<
script
>
var=
newvue(,
methods: }})
script
>
body
>
html
>
除了click以外還有dbclick、keyup、mousemove。
keyup/keydown： 按下按鍵或鬆開
dbclick：連續兩次雙擊觸發
mousemove：滑鼠移動
當然這裡還可以使用乙個內聯語句的寫法。
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
script
src="vue.min.js"
>
script
>
<
script
src=""
>
script
>
head
>
<
body
>
<
div
id>
<
div
v-show
="show"
>這是一段測試文字
div>
<
button
v-on:click
="show?show=false:show=true"
>點選隱藏
button
>
div>
<
script
>
var=
newvue(,
})script
>
body
>
html
>
Vue實踐 指令和事件
vue思想是資料驅動dom，所以你只需要把主要精力放在資料和邏輯上即可，dom的事情交給vue就行了 指令的作用是當表示式的值發生變化的時候，將某些行為應用到dom上 vuejs中的一些指令 1.v bind 動態更新dom元素的屬性 通常用來繫結dom屬性 例如 給該元素繫結href屬性，屬性的值...
Vue 方法與事件
有引數要加括號 或者傳入引數 data methods 如果方法中帶有引數，但是繫結事件時沒有加括號，預設傳遞的引數是原生事件物件 event 與上面的效果相同 按鈕 每次提交表單都會過載頁面只執行一次 data methods btnclick function handle function o...
Vue指令之事件修飾符
stop 阻止冒泡 prevent 阻止預設事件 capture 新增事件偵聽器時使用事件捕獲模式 self 只當事件在該元素本身 比如不是子元素 觸發時觸發 once 事件只觸發一次 div class box click divhandler input type button value 戳他...