How to display the value of a condition with a string in vue?

Question

JavaScript

<p :class="'ic' + true ? 'on' : 'off' + '.svg'">123</p>

Displays the tag simply with class="on", without additional text.

Answer 1

Vue has nothing to do with it. Understand operator precedence .
Let's add parentheses to make it clearer what is executed in what order: Well, of course, writing such expressions in a template is not cool at all. Move it to a computed property or method, like so:
('ic' + true) ? 'on' : ('off' + '.svg')

computed: {
  className() {
    return условие ? 'icon.svg' : 'icoff.svg';
  },
  ...

<p :class="className">