vue初学之v-model和checkbox

最新推荐文章于 2024-09-30 16:38:56 发布

原创最新推荐文章于 2024-09-30 16:38:56 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了一个简单的Vue实例，展示了如何使用v-model指令实现双向数据绑定。通过输入框和复选框元素，演示了如何实时更新数据属性并反映到视图上。

<!DOCTYPE html>
<HTML>
    <head>
        <meta charset="utf">
        <title>v-model的使用</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="message">
            <div>{{message}}</div>
            <label for="licence">
                <input type="checkbox" id="argee" v-model="licence">同意协议
            </label>
            <h3 >请点击同意协议进行下一步,您的选择是:{{licence}}</h3>
            <button :disabled="!licence">下一步</button>  
        </div>
        <script src="../vue.js"></script>
        <script>
            var app = new Vue({
               el:'#app',
               data:{
                   message: 123,
                   licence: 'false',//嘿嘿
                   //licence:false,
               } ,
            })
        </script>
    </body>
</HTML>