zoukankan      html  css  js  c++  java
  • Vue表单输入绑定(文本框和复选框)

    文本框

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>表单输入绑定</title>
        </head>
        <body>

            <div id='app'>
                <!-- 文本框 -->
                <label>姓名是:</label>
                <input v-model="message1" placeholder="请输入" />

                <!-- 多行文本 -->
                <p>多行文本</p>
                <textarea v-model="message2" placeholder="多行文本"></textarea>
                </div>
            </div>


            <script src="vue.js"></script>
            <script>
                var app1 = new Vue({
                    el: "#app",
                    data: {
                        message1: '又又',
                        message2: '1234567890987654321'
                    }
                });
            </script>
        </body>
    </html>
    复选框

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>复选框</title>
        </head>
        <body>
            <div id="app">
                <!-- 单个复选框,绑定到boolean值 -->
                <!--for属性规定与那个input进行绑定 -->
                <input type="checkbox" v-model="checked" id="check" />
                <label for="checkbox">{{checked}}</label>



            </div>

            <div id="app1">
                <!-- 多个复选框,绑定同一个数组 -->
                <input type="checkbox" v-model="item" id="check1" value="复选框1" />
                <label>复选框1</label>
                <input type="checkbox" v-model="item" id="check2" value="复选框2"/>
                <label>复选框2</label>
                <input type="checkbox" v-model="item" id="check3" value="复选框3"/>
                <label>复选框3</label>
                <input type="checkbox" v-model="item" id="check4" value="复选框4"/>
                <label>复选框4</label>
                </br>
                <p>所选中:
                    <span>{{item}}</span>
    </p>
                
                
            </div>


            <script src="vue.js"></script>
            <script>
                var app = new Vue({
                    el: "#app",
                    data: {
                        checked: "true"
                    },
                    model: {
                        checkbox: function() {
                            this.checked = (this.checked == 'true') ? 'false' : 'true';
                        }
                    }
                });


                var app1 = new Vue({
                    el: "#app1",
                    data: {
                        item:[]
                    }
                })
            </script>
        </body>
    </html>

  • 相关阅读:
    JavaScript Design Patterns: Mediator
    Javascript模块化编程系列一: 模块化的驱动
    【329】word 替换文本高级用法
    【327】Python 中 PIL 实现图像缩放
    【326】PIL 截图及图片识别
    【325】python**:selenium
    Android iOS Dribbble风格边栏菜单实现
    Prof UIS相关
    浅谈工作中的几点小心得
    zookeeper与activemq最新存储replicatedLevelDB整合
  • 原文地址:https://www.cnblogs.com/wangshuang123/p/10777738.html
Copyright © 2011-2022 走看看