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)