Vue.js 表单input绑定

最新推荐文章于 2022-12-15 14:42:59 发布

afxyr88622

最新推荐文章于 2022-12-15 14:42:59 发布

阅读量162

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Montauk/p/10061051.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <p>input 元素：</p>
            <input v-model="message" placeholder="编辑我……">
            <p>消息是: {{ message }}</p>

            <p>textarea 元素：</p>
            <p style="white-space: pre">{{ message2 }}</p>
            <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
        </div>

        <div id="app2">
            <p>单个复选框：</p>
            <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox">{{ checked }}</label>

            <p>多个复选框：</p>
            <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
            <label for="runoob">Runoob</label>
            <input type="checkbox" id="google" value="Google" v-model="checkedNames">
            <label for="google">Google</label>
            <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
            <label for="taobao">taobao</label>
            <br>
            <br>
            <input type="radio" id="runoob" value="Runoob" v-model="picked">
            <label for="runoob">Runoob</label>
            <br>
            <input type="radio" id="google" value="Google" v-model="picked">
            <label for="google">Google</label>
            <br>
            <span>选中值为: {{ picked }}</span>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'Runoob',
                    message2: '菜鸟教程\r\nhttp://www.runoob.com',

                }
            })

            var vm2 = new Vue({
                el: '#app2',
                data: {
                    checked: false,
                    picked: false,
                    //checkedNames: []
                },
                methods: {
                    checkedNames: function() {
                        console.info('changed');
                    }
                }
            })
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/Montauk/p/10061051.html

afxyr88622

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 表单input绑定

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.min.js"></script> ...
复制链接

扫一扫