25 表单输入和绑定

最新推荐文章于 2024-06-05 20:23:18 发布

学习总不晚

最新推荐文章于 2024-06-05 20:23:18 发布

阅读量115

点赞数

分类专栏： Vue 文章标签： select表单的使用

本文链接：https://blog.csdn.net/u013472738/article/details/100431608

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

划重点

template上面使用 v-for ：类似于v-if ；；我们可以利用v-for 的 template 标签来渲染一段包含多个元素的内容：可以是一个数组
input 中的 placeholder 属性可以默认输入框中的内容
label 标签的使用
select 选择框的使用

酸菜鱼

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单输入和绑定 </title>
    <script src="./lib/vue-2.6.10.js"></script>
</head>
<style>
    .div_p {
        font-size: 1.5rem
    }

    .text_red {
        color: red;
    }
</style>

<body>
    <div id="app">

        <ul>
            <!--
            在 <template> 上使用 v-for:
            类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。比如： -->
            <template v-for="(item1 , index )  in listObj">
                <li>{{ item1.name }}---</li>
                <li>{{ item1.id }}---</li>
            </template>
        </ul>

        <hr>
        <input v-model="message11" placeholder="edit me111">
        <p>Message is: {{ message11 }}</p>
        <hr>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
        <hr>
        <hr>
        <div id="example-4">
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>
        <hr>
        <div id="example-5">
            <select v-model="selected">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>
        <hr>
        <div id="example-6">
            <select v-model="selected" multiple style="width: 50px;">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <br>
            <span>按住shift键可以多选Selected: {{ selected }}</span>
        </div>

        <hr>
        <select v-model="selected2">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selected2 }}</span>





    </div>


    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: null,
                name: null,
                listObj: [
                    { id: 1, name: 'zs1' },
                    { id: 2, name: 'zs2' },
                    { id: 3, name: 'zs3' },
                    { id: 4, name: 'zs4' },
                    { id: 5, name: 'zs5' }
                ],
                selected: [],
                picked: '',
                selected2: 'A',
                options: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ]
                ,message11:''
            },
            methods: {

            }


        })

    </script>
</body>

</html>