Vue实例选项之【methods】

最新推荐文章于 2024-08-24 19:20:15 发布

技术的搬运工

最新推荐文章于 2024-08-24 19:20:15 发布

阅读量209

点赞数

分类专栏： Vue.js 文章标签： vue vue.js

本文链接：https://blog.csdn.net/it_boy_/article/details/113933492

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

methods

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例选项之【methods】</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>site: {{site}}</h1>
        <h1>url: {{url}}</h1>
        <h1>alexa: {{alexa}}</h1>

        <p>通过调用方法返回数据</p>
        <h1>{{details()}}</h1>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: { // 数据属性
                site: 'csdn',
                url: "https://www.csdn.net/",
                alexa: '1000'
            },
            methods: { // 方法属性
                details: function () {
                    // this指取当前实例的数据 site，通过 return 返回数据
                    return this.site + " - 学的不仅是技术，更是梦想！"
                }
            }

        })
    </script>
</body>
</html>