打赏

Vue 表单

1、v-model

v-model不再关心初始化的value值。

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>购物车示例</title>
    </head>

    <body>
        <div id="app" v-cloak>
            <input type="text" v-model="message" value="122" placeholder="请输入" />
            <p>输入的文本内容是：{{message}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    message: ''
                }
            })
        </script>
    </body>

</html>

效果：

 

 2、单选

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <input type="radio" v-model="picked" value="html" id="html" />
            <label for="html">HTML</label>
            <br />
            <input type="radio" v-model="picked" value="js" id="js" />
            <label for="js">HTML</label>
            <br />
            <input type="radio" v-model="picked" value="css" id="css" />
            <label for="css">HTML</label>
            <br />
            <p>选择项为：{{picked}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    picked: 'js'
                }
            })
        </script>
    </body>

</html>

3、复选框

（1）单独使用时

v-model绑定布尔值

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <input type="checkbox" v-model="checked"/>js           
            <p>选择项为：{{checked}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    checked: false
                }
            })
        </script>
    </body>

</html>

（2）组合使用

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <input type="checkbox" v-model="checked" value="html" id="html" />html
            <lable for='html'>html</lable>
            <br />
            <input type="checkbox" v-model="checked" value="js" id="js" />js
            <lable for='js'>js</lable>
            <br />
            <input type="checkbox" v-model="checked" value="css" id="css" />css
            <lable for='css'>css</lable>
            <br />
            <p>选择项为：{{checked}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    checked: []
                }
            })
        </script>
    </body>

</html>

4、下拉列表

（1）单选下拉列表

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <select v-model="selected">
                <option value="0">html</option>
                <option value="1">js</option>
                <option value="2">css</option>
            </select>
            <br />
            <p>选择项为：{{selected}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    selected: 0
                }
            })
        </script>
    </body>

</html>

（2）多选下拉列表

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <select v-model="selected" multiple="multiple">
                <option value="0">html</option>
                <option value="1">js</option>
                <option value="2">css</option>
            </select>
            <br />
            <p>选择项为：{{selected}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    selected: []
                }
            })
        </script>
    </body>

</html>

5、修饰符

（1）lazy

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <!--在change中同步-->
            <input type="text" v-model.lazy="message" />
            <br />
            <p>{{message}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    message: '',

                }
            })
        </script>
    </body>

</html>

 

（2）number

输入转为number类型

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <!--在change中同步-->
            <input type="number" v-model.number="message" />
            <br />
            <p>{{ typeof message}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    message: 123,

                }
            })
        </script>
    </body>

</html>

（3）trim

去掉输入框的首尾空格

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <!--在change中同步-->
            <input type="text" v-model.trim="message" />
            <br />
            <p>{{message}}</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    message: '   5555  66 ',

                }
            })
        </script>
    </body>

</html>

 

posted @ 2017-12-18 11:35  孟繁贵  阅读(380)  评论(0)    收藏  举报
TOP