vue指令：v-model

悠悠 2022-08-28 05:54 41阅读 0赞

**注意：代码所需vue可以通过npm i vue --save下载，然后引入即可**

**案例**

<!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>Document</title>
        <script src="./node_modules/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <div>姓名：<input type="text" v-model="nickname"></div>
            <div>生日：<input type="date" v-model="birthday"></div>
            <div>{
       {nickname}}</div>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    nickname: '妲己',
                    birthday: '2021-11-11'
                },
                methods: {}
            })
        </script>
    </body>
    
    </html>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_19_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/e65f0b5612a84524bddd920339e0fbcc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue指令

Vue指令 * v-text * v-html * v-show * v-if * v-else * v-else-if * v-for ...

迈不过友情╰/ 2024年04月17日 05:59/ 0 赞/ 86 阅读

相关 vue 指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2023年11月05日 00:52/ 0 赞/ 115 阅读

相关 Vue指令

一、Vue指令的规定 1. 所有的Vue指令必须以v-开头，后面带命令动词。 2. 指令的参数：v-指令动词.参数 3. 指令的修饰符：v-指令动词:修饰符二

阳光穿透心脏的1/2处/ 2023年06月25日 11:29/ 0 赞/ 14 阅读

相关 Vue指令

v-text v-text的作用跟插值表达式是一样的，但是不同的地方在于：v-text会覆盖元素中原本的内容，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

男娘i/ 2023年06月09日 07:59/ 0 赞/ 18 阅读

相关 Vue 指令

基本指令（1）v-bind指令语法格式1：单个语法格式 v-bind:attributeName=variable 以下是HTML代码： <

矫情吗；*/ 2023年06月06日 08:22/ 0 赞/ 19 阅读

相关 vue指令

总结 v-text v-text是一个渲染文本的指令不能解析标签会把标签当成字符串渲染在页面上 v-html v-html 也是一个渲染

电玩女神/ 2023年02月22日 13:56/ 0 赞/ 28 阅读

相关 vue指令

vue指令一个正在努力爱好运动的前端座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。 -------------------- 文章目录

朱雀/ 2022年12月22日 06:12/ 0 赞/ 143 阅读

相关 vue指令

vue介绍 1.作者尤雨溪(vue) \[阿里\] 3.0 2.vue概念官网：[Vue.js][] 渐进式 JavaScript 框架渐进式：主

偏执的太偏执、/ 2022年09月16日 06:05/ 0 赞/ 163 阅读

相关 Vue指令

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 非商业用途自由转载，保持署名，注明出处！ -------

待我称王封你为后i/ 2021年11月17日 13:10/ 0 赞/ 436 阅读

相关 Vue指令

Vue指令 1. watch监听在vue中watch就是时时刻刻的监听绑定的这个data模型数据，当这个数据发生变化的时候，watch就会被触发，自动的执行其中的

￡神魔★判官ぃ/ 2021年07月24日 19:31/ 0 赞/ 518 阅读