Vue · 2022年7月6日 0

v-model指令

v-model指令作用是便捷的设置和获取表单元素的值,绑定的数据会和表单元素值相关联。

效果在线演示

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
        <!-- 导入vue包 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <div id="app">
            <input type="button" value="恢复默认文字" @click="setM"><br><br>
            <input type="text" v-model="message" @keyup.enter="getM">
            <p>{{message}}</p>
        </div>

        <script>
            var app=new Vue({
                el:"#app",
                data:{
                   message:"动态文本框"
                },
                methods:{
                    getM:function(){
                        alert(this.message);
                    },
                    setM:function(){
                        this.message="动态文本框"
                    }
                },
            })
        </script>
</body>
</html>