用Vue将一段文字进行反转

最新推荐文章于 2023-12-14 15:01:25 发布

一个想要翻身的咸鱼*^*

最新推荐文章于 2023-12-14 15:01:25 发布

阅读量536

点赞数

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

本文链接：https://blog.csdn.net/qqqddd_yyqx/article/details/129754145

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我们可以用三种方法来实现文字的反转

第一种插值法

利用插值法直接将文字反转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <template id="root">
        <div><!--插值法-->
            <div>{{message.split('').reverse().join('')}}</div><!--先分离成数组split，反转reverse后再组合join在一起-->
        </div>
    </template>
    <script>
        const app=Vue.createApp({
            template:"#root",
            data(){
                return{
                    message:'hello Vue'
                }
            } 
        })
        app.mount("#app")
    </script>
</body>
</html>

第二种methods方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <template id="root"> 
        <div><!--method方法-->
            <div>{{mymessage()}}</div>
        </div>
    </template>
    <script>
        const app=Vue.createApp({
            template:"#root",
            data(){
                return{
                    message:'hello Vue'
                }
            },
            methods:{
                mymessage(){
               return this.message.split('').reverse().join('')
             }
            }  
        })
        app.mount("#app")
    </script>
</body>
</html>

第三种计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <template id="root">
        <div><!--计算属性-->
            <div>{{mymessage}}</div>
        </div>
    </template>
    <script>
        const app=Vue.createApp({
            template:"#root",
            data(){
                return{
                    message:'hello Vue'
                }
            },
            computed:{ 
                mymessage(){
                return this.message.split('').reverse().join('')
            }
        }
        })
        app.mount("#app")
    </script>
</body>
</html>

这三种方法区别不大，都可以使用，效果如下