Question

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

点击帖子时

单击的元素的背景颜色变为红色
带有“ bell-icon”类的元素被添加为“ shaking”类
最后，我展示了一个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">

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

1 个答案: