Vue学习（过滤器和template标签）

最新推荐文章于 2022-09-02 09:55:00 发布

LSQ_2584951836

最新推荐文章于 2022-09-02 09:55:00 发布

阅读量269

点赞数

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

本文链接：https://blog.csdn.net/LSQ_2584951836/article/details/102555479

版权

Vue.js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

全局过滤器：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 2.使用过滤器 -->
        {{money | myfilter}}
    </div>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
        // 1.全局定义过滤器
        Vue.filter('myfilter', function(val) {
            return "您的余额: ￥" + val;
        })
        var vm = new Vue({
            el: "#app",
            data: {
                money: 1000
            }
        })
    </script>
</body>
</html>

局部过滤器：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 2.使用过滤器 -->
        {{money | myfilter}}
    </div>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                money: 1000
            },
            filters: {
                // 1.定义局部过滤器
                myfilter(val) {
                    return "您的余额为: " + val;
                }
            }
        })
    </script>
</body>
</html>

template标签

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="isShow=!isShow">切换模板</button>
        <!-- 
            1.template标签在页面中不会渲染。
            2.template不支持v-show。
         -->
        <template v-if="isShow">
            <div>
                注册
                <input type="text">
            </div>
        </template>
        <template v-else>
            <div>
                登录
                <input type="text">
            </div>
        </template>
    </div>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: true
            }
        })
    </script>
</body>
</html>