前端VUE3.0,DAY11，姓名案例

最新推荐文章于 2023-07-03 11:18:11 发布

疯子的梦想＠

最新推荐文章于 2023-07-03 11:18:11 发布

阅读量263

点赞数

本文链接：https://blog.csdn.net/weixin_48681463/article/details/119392584

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY11

- - 姓名案例插值语法实现
  - 姓名案例methods语法实现

姓名案例插值语法实现

1.注意其中的slice的用法。是截取的意思。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>姓名案例——插值语法实现</title>
    <!--引入vue.js-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <!--br是换行符-->
    <div id="root">
        <!--使用v-model进行双向数据绑定，使得输入框内数据改变时，data也会改变，data里的参数改变时，输入框也会改变。-->
        姓:<input type="text" v-model:value="xing"><br>
        名:<input type="text" v-model:value="ming"><br>
        全名:<span>{{xing.slice(0,3)}}-{{ming}}</span>
        <!--slice(0,3)是截取的意思，截取第0，1，2位，不包括3-->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
    //创建vue实例
    new Vue({
        el: '#root',
        data: {
            xing: '张',
            ming: '三'
        }
    })
</script>

</html>

在这里插入图片描述

姓名案例methods语法实现

细节需要注意：当vue的data中的任意数据发生变化，则vue模板就会在重新解析一次。然后更新用到data中数据的地方

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>姓名案例——methods法实现</title>
    <!--引入vue.js-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <!--br是换行符-->
    <div id="root">
        <!--使用v-model进行双向数据绑定，使得输入框内数据改变时，data也会改变，data里的参数改变时，输入框也会改变。-->
        姓:<input type="text" v-model:value="xing"><br>
        名:<input type="text" v-model:value="ming"><br>
        全名:<span>{{fullname()}}</span>
        <!--调用函数的返回值做插值-->
        <!--在插值括号里调用函数的时候要加括号（）-->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
    //创建vue实例

    //细节需要注意：当vue的data中的任意数据发生变化，则vue模板就会在重新解析一次。然后更新用到data中数据的地方
    new Vue({
        el: '#root',
        data: {
            xing: '张',
            ming: '三'
        },
        methods: {
            fullname() {
                console.log(this);//打印输出当前的this，证明this就是当前的vue实例内容
                return this.xing + '-' + this.ming//在返回值中进行全名的拼写。
            }
        }
    })
</script>

</html>

在这里插入图片描述

疯子的梦想＠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端VUE3.0,DAY11，姓名案例

VUE3.0,DAY11姓名案例插值语法实现姓名案例methods语法实现姓名案例插值语法实现1.注意其中的slice的用法。是截取的意思。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
复制链接

扫一扫