Vue

by VaaL2004

HTML

<div id="app">
  <h2><a href='#' @click='change()'>Поменять элементы</a></h2>
  <div class='content-block expandable' v-for="content in contents" @click="expand()" :class="{'expandable': content.count}">
    {{ content }}
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.content-block {
  width: 100px;
  height: 100px;
  min-height: 100px;
  border: 1px solid;
  margin-top: 5px;
  overflow: hidden;
  padding: 2px;
}

.expandable {
  cursor: pointer;
  background: grey;
}

Vue

new Vue({
  el: "#app",
  data: {
    contents: [
      'Этот элемент обычный',
      'Этот нужно выделить так, чтобы было понятно, что он умеет раздвигаться. И ещё немножко текста, чтобы быть уверенным, что этот текст не вместится в див'
    ]
  },
  computed: {
  	isOverflowed(string) {
    	if (string.count > 1) {
      	return true;
      }
    }
  },
  methods: {
  	expand() {
    if (event.target.style.height != 'auto') {
      	event.target.style.height = 'auto';
      } else {
      	event.target.style.height = '100px';
      }
    },
    change() {
    	this.contents = [
      	'Теперь должен быть выделен этот элемент, потому что теперь пользователь дожен понимать, что тут есть ещё какая-то информация, которую он возможно не увидит',
        'А этот должен быть обычным'
      ];
    }
  }
})