javascript - 更改 v-for 数组中每个元素的属性

Question

我正在尝试用 Vue 编写 javascript 的方式来解决问题。

考虑这种情况:

在.vue template

 <button  v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button>

   <div v-for="(tweet, index) in tweets">
      <div class="each_tweet">
        <textarea v-on:keyup="typing(index)"
                  v-model="tweet.content"
                  placeholder="What's happening now">{{ tweet.content }}</textarea>
      </div>
    </div>

在.vue <script>

export default {
  methods: {
    biggerFont:  function() {

       //can I somehow use this.tweets.style.fontSize to influence all the fontSize? 
       document.getElementsByClassName("each_tweet").style.fontSize = "xx-large"  
    }
 }
}

我的问题是:

1. 如何更改 tweets 中文本区域每个值的字体大小？是否有默认的 Vue 方式来影响这些 fontSize？

我尝试使用document.getElementsByClassName.style.fontSize但失败了而且这似乎不是 Vue 的方式。谢谢!

Answer 1

我相信 Vue 的方法是使用类和样式绑定(bind)。例如:

<textarea v-bind:class="{ big: enlarge}">{{item}}</textarea>

https://jsfiddle.net/e064m859/