Question

我有这样的方法：

var gridSizeX:Int = 10
var gridSizeY:Int = 10
var gridArray: [[UIView?]] = Array(repeating: Array(repeating: nil, count: gridSizeY), count: gridSizeX)

func loadCell(xPos:Int, yPos:Int) {
    let xStart = Int(size.width/2/2) - ((gridSizeX * gridScale)/2)
    let yStart = Int(size.height/2/2) - ((gridSizeY * gridScale)/2)

    let cell : UIView!
    cell = UIView(frame: CGRect(x: xStart + (xPos * gridScale), y:yStart + (yPos * gridScale), width:gridScale, height:gridScale))

    cell.layer.borderWidth = 1
    cell.layer.borderColor = UIColor(red:0.00, green:0.00, blue:0.00, alpha:0.02).cgColor
    cell.backgroundColor = UIColor(red:1.00, green:1.00, blue:1.00, alpha:0)

    self.view?.addSubview(cell)

    gridArray[xPos][yPos] = cell
}

func drawGrid() {
    for y in 0 ... gridSizeY {
        for x in 0 ... gridSizeX {
            loadCell(xPos:x, yPos:y)
        }
    }
}


func breakGrid() {
    for y in 0 ... gridSizeY - 1 {
        for x in 0 ... gridSizeX - 1 {
            gridArray[x][y]?.removeFromSuperview()
        }
    }
}

在视图中我有这个：

  methods: {

          replyBox: function(e){
            e.preventDefault();
             this.isActive = !this.isActive;
           );
         },

现在我想要的是仅为回复链接附近的元素添加活动类。在jquery中，我可以使用<div class="comment_list" v-for="comment in all_comments"> <a href="#" class="initial" v-on:click="replyBox">REPLY</a> <div id="reply-box-@{{comment.id}}" class="reply-box" v-bind:class="{active: isActive}"> <div class="user_comment row"> <div class="col-md-1 col-sm-1 col-xs-1"> <div class="user_profile_image {{ isset($current_user->personal_user) ? 'bg_blue' : 'bg_green'}}"> @if(isset($current_user->avatar) && $current_user->avatar != '') <img src="{{ avatar_path($current_user->avatar)}}" alt="" /> @else <img src="{{ home_asset('img/user_icon.png') }}" alt="" /> @endif </div> </div> <div class="col-md-11 col-sm-11 col-xs-11"> <textarea class="comment_input" placeholder="Join the discussion..." @keydown.enter.prevent="postComment({{$current_user->id}}, {{$article->id}})" v-model.trim="reply_comment"></textarea> </div> </div> </div> </div>并找到兄弟姐妹，但我怎么能在vue.js中这样做呢？

Answer 1

如果您可以在评论中添加其他属性，则可以执行以下操作：

模板：

  methods: {
    replyBox: function(comment) {
      comment.isActive = !comment.isActive;
    }
  },

方法：

<template>
  <li>
    <a href="#" class="initial" v-on:click.prevent="replyBox(comment)">REPLY</a>

    <div id="reply-box-@{{comment.id}}" class="reply-box" v-bind:class="{active: comment.isActive}">
      <div class="user_comment row">
       <div class="col-md-1 col-sm-1 col-xs-1">
         <div class="user_profile_image {{ isset($current_user->personal_user) ? 'bg_blue' : 'bg_green'}}">
           @if(isset($current_user->avatar) && $current_user->avatar != '')
           <img src="{{ avatar_path($current_user->avatar)}}" alt="" />
         @else
           <img src="{{ home_asset('img/user_icon.png') }}" alt="" />
         @endif
         </div>
       </div>
       <div class="col-md-11 col-sm-11 col-xs-11">
         <textarea  class="comment_input" placeholder="Join the discussion..." @keydown.enter.prevent="postComment({{$current_user->id}}, {{$article->id}})" v-model.trim="reply_comment"></textarea>
       </div>
      </div>
    </div>
  </li>
</template>

<script>
  export default {
    name: 'comment',
    props: ['comment']
    methods: {
      replyBox: function(comment) {
        comment.isActive = !comment.isActive;
      }
    },
  };
</script>

或者，您可以在单独的组件中提取它：

在.vue文件中：

<ul class="comment_list" v-for="comment in all_comments">
  <comment :comment="comment"></comment>
</ul>

然后你可以像这样使用它：

curl -XDELETE 'localhost:9200/filebeat-2016*?pretty'

Answer 2

直接来自文档：https://vuejs.org/v2/guide/class-and-style.html

<div v-bind:class="{ active: isActive }"></div>

isActive是您必须满足的条件

如何将活动类添加到特定元素？

2 个答案: