vue前端开发自学demo-input标签数据双向绑定!今天为大家 展示的内容是,前端开发常见的,form表单里面的,一些输入数据的元素,动态绑定数据的案例。比如input,以及checkbox的状态绑定案例。
首先,老规矩,贴代码。
<template>
<h3>input数据动态绑定</h3>
<input type="input" v-model="message"/>
<p>您输入的是:{{ message }}</p>
<hr>
<form action="#">
<input type="checkbox" id="term" v-model="checked" />
<label for="term" >我同意以上所有服务条款</label>
<button @click="register">注册</button>
</form>
</template>
<script>
export default{
data(){
return{
message:"",
checked:false
}
},
methods:{
register(){
if(this.checked){
console.log('您同意了条款内容,点击了register');
}else{
console.log("请您务必仔细阅读条款内容,勾选同意");
}
}
}
}
</script>
如图所示,第一个部分内容,是input数据动态绑定的内容。第二个部分代码是checkbox的动态绑定,可以实时的跟踪到chexkBox的选中与否。
下面是展示的效果截图。第一张图是,如果用户勾选了,“我同意所有条款内容”切点击了注册按钮,触发了register的情况
如图,用户勾选了之后,点击注册按钮,打印在控制台的信息。就是我们提前做了checkbox状态的判定了。true(勾选后,就是ture)(默认状态是false)
这个截图,是用户没有勾选checkbox的时候,默认状态 是false,点击注册按钮,进入了else代码块内。执行了控制台打印信息。
vue提供的这种指令【v-model】,很惬意,可以极大的提升前端开发人员的工作效率。难怪它一上市,就受到了业界的喜欢和青睐。名副其实的“为大众着想”!后续还会持续更新其他的vue自学内容。欢迎大家留言互动。