vue.js的v-if,v-on以及methods
<html>
<head>
<meta charset="utf-8">
<title>wenzhen</title>
</head>
<body>
<div id="app">
<!-- v-if:v-if 條件渲染指令，根據(jù)其后表達(dá)式的bool值進(jìn)行判斷是否渲染該元素掷豺； -->
<div id="title" v-if="name==='azer'">
{{name}}
</div>
<!-- v-model:實(shí)現(xiàn)與數(shù)據(jù)的雙向綁定 -->
請(qǐng)輸入：<input type="text" name="name" v-model='name'>
<input type="checkbox" name="checkbox" v-model='isbind'>
<br>
<!-- v-on:綁定事件，冒號(hào)后邊為click則為點(diǎn)擊事件薄声，等號(hào)后邊為方法 -->
<button v-on:click='submit' >提交</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script >
new Vue({
el:app,
data:{
name:"azerkang",
isbind:true
},
<!--methods：固定寫法当船，里邊為對(duì)應(yīng)元素的方法-->
methods:{
submit:function(){
window.alert("是否輸入"+this.isbind);
}
}
})
</script>
</body>
</html>
解釋：
v-if="name==='azer'"
????v-if:vue的if判斷，條件渲染指令默辨；等號(hào)后邊為條件德频，一般為布爾類型；如果等號(hào)后邊的表達(dá)式的值為true缩幸，則渲染v-if對(duì)應(yīng)的標(biāo)簽中的內(nèi)容壹置；如此處'name'的值為'azer'時(shí)，id為'title'的div標(biāo)簽中的內(nèi)容才顯示,否則不顯示桌粉。
v-on:click='submit'
????v-on:vue的綁定事件蒸绩，一般后邊為click，即點(diǎn)擊铃肯，當(dāng)然跟js一樣也可以為其他的事件患亿。
methods:{
submit:function(){
window.alert("是否輸入"+this.isbind);
}
}
????methods:方法區(qū)，事件可以調(diào)取其中的方法押逼，此處點(diǎn)擊submit按鈕后步藕，會(huì)調(diào)取methods中的submit方法。
