Vue模板的插值表达式中使用了一个if语句报错

1.初步学习vue时候，写了如下代码，遇见报错

<template>

  <p>{{ msg }}</p>

  <p>{{ if(res)  retrun message}}</p>

</template>

<script>

export default {

  data() {

    return {

      msg: "12131",

      res:true,

      message: "大家好"

     

    }

  }

}

</script>

原因:尝试在Vue模板的插值表达式中使用了一个if语句，但是Vue模板不支持直接在插值表达式中使用控制流语句。

解决方法:

(1).使用vue的计算属性

<template>
  <p>{{ msg }}</p>
  <p v-if="res">{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue!',
      res: false, // 假设这是你的条件变量
      message: '这是一个消息' // 这是你想显示的消息
    };
  }
};
</script>

2.使用方法来处理

<template>
  <p>{{ msg }}</p>
  <p v-if="shouldDisplayMessage">{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue!',
      res: false,
      message: '这是一个消息'
    };
  },
  computed: {
    shouldDisplayMessage() {
      return this.res; // 根据条件变量返回布尔值
    }
  }
};
</script>

3.使用三元运算符(只能作为临时处理的一种方法)

<template>
  <p>{{ msg }}</p>
  <p>{{ res ? message : '' }}</p>
</template>

问题解决的参考:  Vue.js 教程 | 菜鸟教程 (runoob.com)

                                Kimi.ai - 帮你看更大的世界 (moonshot.cn)