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 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素; -->
<div id="title" v-if="name==='azer'">
{{name}}
</div>
<!-- v-model:实现与数据的双向绑定 -->
请输入:<input type="text" name="name" v-model='name'>
<input type="checkbox" name="checkbox" v-model='isbind'>
<br>
<!-- v-on:绑定事件,冒号后边为click则为点击事件,等号后边为方法 -->
<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:固定写法,里边为对应元素的方法-->
methods:{
submit:function(){
window.alert("是否输入"+this.isbind);
}
}
})
</script>
</body>
</html>
解释:
v-if="name==='azer'"
v-if:vue的if判断,条件渲染指令;等号后边为条件,一般为布尔类型;如果等号后边的表达式的值为true,则渲染v-if对应的标签中的内容;如此处'name'的值为'azer'时,id为'title'的div标签中的内容才显示,否则不显示。
v-on:click='submit'
v-on:vue的绑定事件,一般后边为click,即点击,当然跟js一样也可以为其他的事件。
methods:{
submit:function(){
window.alert("是否输入"+this.isbind);
}
}
methods:方法区,事件可以调取其中的方法,此处点击submit按钮后,会调取methods中的submit方法。