vue前端开发自学demo-input标签数据双向绑定

本文介绍: 今天为大家展示的内容是，前端开发常见的，form表单里面的，一些输入数据的元素，动态绑定数据的案例。vue提供的这种指令，很惬意，可以极大的提升前端开发人员的工作效率。如图，用户勾选了之后，点击注册按钮，打印在控制台的信息。如图所示，第一个部分内容，是input数据动态绑定的内容。这个截图，是用户没有勾选checkbox的时候，默认状态是false，点击注册按钮，进入了else代码块内。第一张图是，如果用户勾选了，“我同意所有条款内容”切点击了注册按钮，触发了register的情况。

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的情况