Question

我试图用Vue编写javascript的方式解决问题。

考虑这种情况：

at .vue *

template

at .vue <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>

<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" } } }中textarea的每个值的字体大小？是否存在影响这些fontSize的默认Vue方式？

我尝试使用tweets失败，但似乎不是Vue方式。谢谢！

Answer 1

document.getElementsByClassName方法返回nodeList，因此您必须使用其索引访问DOM元素。

export default {
  methods: {
     biggerFont:  function() {
          var tweets=document.getElementsByClassName("each_tweet");
          for(var i=0;i<tweets.length;i++){
              tweets[i].style.fontSize = "xx-large";
          }  
     }
  }
}

Answer 2

我相信Vue的做法是使用类和样式绑定。例如：

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

https://jsfiddle.net/e064m859/

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

2 个答案: