今天的码农女孩做了关于vue计算函数、监听函数和过滤函数的练习

最新推荐文章于 2023-08-22 18:19:51 发布

丁丁丁dingdingding

最新推荐文章于 2023-08-22 18:19:51 发布

阅读量229

点赞数

分类专栏：小练习文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_64444606/article/details/124510718

版权

本文介绍了Vue.js中如何实现监听、计算和过滤函数的实践操作。首先，通过监听函数验证年龄输入，确保其为18-80岁的整数。接着，创建计算函数，实现了动态计算文本框内加减乘除表达式的结果。最后，利用过滤函数进行敏感词过滤，将特定词汇替换为星号。

摘要由CSDN通过智能技术生成

1.创建一个监听函数，验证年龄并给出提示
当修改的年龄值非数字类型，提示请输入正确年龄，变量清空
当修改的年龄值大于80，小于18，提示年龄范围在18-80岁，变量清空

<body>
    <div id="app">
        <input type="text" v-model="age">
        <h1>{
  {msg}}</h1>
        <h1>{
  {age}}</h1>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                age:18,
                msg:""
            },
            watch:{
                age:function(news,old){
                   if(isNaN(news)){
                       this.msg="请输入正确数字类型"
                       this.age=old
                   }
                   else if(news>80){
                       this.msg="年龄范围在1-80岁"
                       this.age=old
                   }
                   else{

最低0.47元/天解锁文章

丁丁丁dingdingding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
今天的码农女孩做了关于vue计算函数、监听函数和过滤函数的练习

1.创建一个监听函数，验证年龄并给出提示当修改的年龄值非数字类型，提示请输入正确年龄，变量清空当修改的年龄值大于80，小于18，提示年龄范围在18-80岁，变量清空<body> <div id="app"> <input type="text" v-model="age"> <h1>{{msg}}</h1> <h1>{{age}}</...
复制链接

扫一扫

专栏目录