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方法。
网友评论