>
}v-if
='isshow'
>
我是對的div
>
v-else
>
我是錯的div
>
>
} / }li
>
ul>
div>
>
newvue(,
,], isshow:
true
,//布林型別
msg:[1
,2,3
,4,5
],},
})script
>
v-html 會解析html標籤，然後再渲染資料
>
v-text
='msg'
>
span
>
v-html
='msg'
>
div>
} -->
div>
>
newvue(,
})script
>
根據條件判斷，控制當前節點是否顯示到頁面中，如果不符合條件，那麼不會顯示，並且節點不會進行掛載
v-show
根據條件判斷，控制當前節點是否顯示到頁面中，如果不符合條件，那麼不會顯示，但是節點會掛載到dom樹上，只是新增了乙個display:none
繫結屬性
簡寫形式是 :
屬性是動態的
繫結行內樣式 :style
取值：{}，obj，[obj1,obj2]
繫結類名 :class
>
:style
='[obj,obj1]
'>
div>
div>
>
newvue(,
obj1:},
methods:})
script
>
簡寫形式：@
事件型別為動態值
事件修飾符：
.once 代表當前時間只執行一次
.stop 代表阻止冒泡行為
.prevent 阻止預設行為
>
@click
='outer'
>
@click
='inner'
class
="inner"
>
div>
div>
div>
>
newvue(,
methods:
,inner()
,outer()
}})script
>
>
v-model
='form'
>
}>
姓名：type
="text"
v-model.trim
='form.username'
>
div>
>
簡介：cols
='30'
rows
='10'
v-model
='form.desc'
>
textarea
>
div>
type
="checkbox"
value
="吃飯"
v-model
='form.hobby'
>
吃飯 type
="checkbox"
value
="睡覺"
v-model
='form.hobby'
>
睡覺 type
="checkbox"
value
="打遊戲"
v-model
='form.hobby'
>
打遊戲
>
性別：type
="radio"
value
="1"
v-model
='form.gender'
>
男 type
="radio"
value
="0"
v-model
='form.gender'
>
女 div
>
>
multiple
v-model
='form.address'
>
value="
">
請選擇option
>
value
="山西"
>
山西option
>
value
="江西"
>
江西option
>
value
="廣西"
>
廣西option
>
value
="江蘇"
>
江蘇option
>
select
>
div>
form
>
div>
>
newvue(}
, methods:})
script
>
lazy
預設情況下，v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步。可以新增 lazy 修飾符，從而轉為在 change 事件之後進行同步
number
如果想自動將使用者的輸入值轉為數值型別，可以給 v-model 新增 number 修飾符
trim
如果要自動過濾使用者輸入的首尾空白字元，可以給 v-model 新增 trim 修飾符
Vue模板語法 事件修飾符
如果需要在內聯語句處理器中訪問原生dom事件。可以使用特殊變數 event，把它傳入到methods中的方法中。注意 事件修飾符新增在繫結事件名的後面。例如 事件名.修飾符 方法 click.stop onclick v on 事件名.修飾符 方法 v on click.stop onclick s...
vue的模板語法
vue 指令元件 模板語法支援性還是很高的，資料型別都是支援的，但是不支援 輸出語法 console.log alert 格式 v mustache語法 v msg v v html 將乙個資料展示在乙個dom內容中，innerhtml html屬性 v bind 單項資料繫結 v text 非轉義...
Vue的基本語法
el 指定vue所操作的dom範圍，屬性值是你獲取的節點 data 就是vue的model，是存放資料的，屬性值是乙個物件或者是乙個函式，在元件中的data是乙個函式 methods 是vue中的事件方法 指令式渲染 1 v html,v text 採用 語法 插值運算 2 v html 它可以加標...