Vue.js - 当我不知道会有多少时改变元素

Question

我已经使用 jQuery 很长时间了，现在我正在尝试切换到 Vue.js。我有一个从数据库表中获取的帖子列表，当我单击每个帖子时，我需要执行一些操作。我不知道会有多少帖子，可能是 1000 或 10,000 个帖子。使用 jQuery 似乎很容易做到这一点，但我将如何使用 Vue.js 做到这一点？

点击帖子时

1. 被点击元素的背景颜色变为红色
2. 内部带有“bell-icon”类的元素被添加了“摇晃”类
3. 最后，我展示了一个 id 为“#bell-modal”的铃声模式

这是我用 jQuery 制作的。附言我正在使用 Laravel 框架。

PHP/HTML

$rows = Posts::all();

@foreach($rows as $row)
    <div class="row">

        {{ $row->name }}
        <span class="ring-bell">
            <i class="material-icons bell-icon bell-id-{{ $row->id }}">ring_bell</i>
        </span>

    </div>
@endforeach

Javascript

$( ".ring-bell" ).click(function() {
    var bell_id = $( this ).data("bell-id");

    $( this ).css( "background-color", "blue" );
    $(".bell-id-" + bell_id).addClass("shaking");
    $("#bell-modal").show();
});

Answer 1

它最终看起来像这样：

vue的javascript部分：

data:{
  posts:[] // all of your posts as a JSON object...
}
methods:{
  myMethod:function(){...}
}

html:

<div @click="myMethod" v-for="(p,index) in posts" :key="index">