Vue的基本组件3.1(v-model)

GeekLiHua

发布于 2025-01-21 04:23:40

10400

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

简介：本文旨在用最短的篇幅和例子，代入大家入门vue,也是本博主的一个学习记录，本文主要介绍的组件有，v-mind。

v-model

用法：用来绑定标记的value属性。v-model所谓的“双向绑定”：当文本框中的数据发生改变后，可以发现data中所定义的msg变量也发生了相应的改变。

1. 输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="输入姓名...">
        <p>输入姓名为：{{name}}</p>
        <textarea v-model="introduction" placeholder="输入介绍..." cols="40" rows="10"></textarea>
        <p>输入的简介为:{{introduction}}</p>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                name:"",
                introduction:"",

            },
            methods:{
            }
        });
    </script>
</html>

运行结果：

2. 单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选框</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>选择性别:</p>
        <input type="radio" v-model="gender" value="man">男
        <input type="radio" v-model="gender" value="woman">女
        <p>选中的性别为：{{gender}}</p>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                gender:"man"
            },
            methods:{
            }
        });
    </script>
</html>

运行结果：

复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>选择爱好:</p>
        <input type="checkbox" id="reading" value="reading" v-model="hobbies">
        <label for="reading">读书</label>
        <input type="checkbox" id="basketball" value="basketball" v-model="hobbies">
        <label for="basketball">篮球</label>
        <input type="checkbox" id="travelling" value="travelling" v-model="hobbies">
        <label for="travelling">旅游</label>
        <br>
        <p>选择的爱好为：{{hobbies}}</p>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                hobbies:[]
            },
            methods:{
            }
        });
    </script>
</html>

运行结果：

下拉选择框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单版</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <select v-model="selectedCategory">
            <option value="">选择一个类别</option>
            <option value="computer">电脑</option>
            <option value="book">图书</option>
            <option value="car">汽车</option>
            <option value="food">食品</option>
        </select>
        <p>
            选择的类别是：{{selectedCategory}}
        </p>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                selectedCategory:'computer'
            },
            methods:{
            }
        });
    </script>
</html>