Vue Js 添加动态类名

Question

Vue Js 添加动态类名

我是 Vue JS 的初学者。我想添加类名我有一个使用 for 循环的简单数组，并且想要添加类名 lang-{ARRARY VALUE}

我尝试了一些似乎不起作用的事情。我将感谢社区的任何帮助

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>

    <title></title>

    <!-- BootStrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <!-- JQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


<body>

<div id="app">
    {{ message }}

    <p v-for=" x in languages"  v-on:click="call(x)" :id="'obj-'x" style="border:1px solid black; padding: 10px;">
        {{x}}
    </p>

</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            languages:["Python", "c++"]
        },
        methods:{
            call:function (x) {
                alert("Hello "+ x);
            }
        }
    })
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)