首页 > 其他分享 >前端-vue基础31-表单域修饰符

前端-vue基础31-表单域修饰符

时间:2023-02-10 10:35:51浏览次数:47  
标签:info vue console log 31 修饰符 msg age

前端-vue基础31-表单域修饰符_修饰符

 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 
    </style>
</head>
 
<body>
    <div id="app">
        <div>
            <input type="text" v-model.number='age'>
            <input type="text" v-model='info'>
            <input type="text" v-model.lazy='msg'>
            <div>{{msg}}</div>
            <button @click='handle'>点击</button>
        </div>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            //绑定的标签
            el: '#app',
            //自定义按键修饰符
            data: {
                age: '',
                info: '',
                msg: ''
            },
            methods: {
                handle: function() {
                    console.log(this.age + 13);
                    console.log(this.info.length);
                }
            }
        });
    </script>
</body>
 
</html>

前端-vue基础31-表单域修饰符_javascript_02

 

标签:info,vue,console,log,31,修饰符,msg,age
From: https://blog.51cto.com/u_15460007/6048836

相关文章

  • 前端-vue基础33-自定义指令用法
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><t......
  • 前端-vue基础28-vue常用特性
      ......
  • vue 防抖节流器
    节流器:在一定时间内频繁的触发函数只会执行一次应用场景:我这里有一个图表需要在窗口改变大小的时候重绘图表的大小,但是窗口改变大小的事件过于频繁,需要增加一个节流器来进......
  • vue3-使用百度地图遇到的坑-地图实例化
    1、创建地图实例    原因:在使用vue3为了只定义一次地图实例,在所有方法中使用,直接使用如下定义方式:setup(){constdata=reactive({bmap:null,})......
  • docker搭建vue+nginx部署
    Vue+nginx部署1.首先安装ningx镜像 2.将nginx关键目录映射到本机  首先在本机创建nginx的文件存储目录       www:nginx存储网站网页的目录......
  • vue3实现单页crud
    1.介绍主要实现单页curd,包含分页、新增、修改、删除、批量删除、条件搜索、表单校验。导入和导出暂未实现。、本文章只是学习过程。仅供参考。2.代码,按需复制修改即可......
  • Vue课程56-演示案例需求
     ......
  • Vue课程59-label的for属性
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="w......
  • Vue课程57-循环渲染表格行的数据
    代码部分<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"/> <metahttp-equiv="X-UA-Compatible"content="IE=edge"/> <metaname="viewpor......
  • Vue课程49-时间绑定-按键修饰符
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......