当前位置：首页 > news >正文

vue中的与，或，非

news 2025/9/1 15:24:13

核心概念：Vue 模板中的逻辑运算

在 Vue 的模板中，我们经常需要根据条件来显示或隐藏内容、动态绑定类名和样式等。这时就会用到 JavaScript 的逻辑运算符：&& (与)、|| (或)、! (非)。

这些运算符在 Vue 模板中的工作方式与在纯 JavaScript 中完全一致。

1. 与 (AND) - `&&`

功能：只有当两个操作数都为真值时，整个表达式才返回真。如果第一个操作数为假，则直接返回第一个操作数的值（ falsy value ）；否则返回第二个操作数的值。
模板中的应用：常用于条件渲染。例如，“当某个条件成立时，才渲染某个元素”。

<template><div><!-- 当 user 存在且 loggedIn 为 true 时，才显示欢迎信息 --><p v-if="user && user.loggedIn">欢迎，{{ user.name }}！</p><p v-else>请登录</p><!-- 另一个例子：当数据加载完成且有数据时才显示列表 --><ul v-if="!loading && items.length"><li v-for="item in items" :key="item.id">{{ item.title }}</li></ul><p v-else-if="loading">加载中...</p><p v-else>暂无数据</p></div>
</template><script>
export default {data() {return {user: {loggedIn: true,name: '张三'},loading: false,items: [{ id: 1, title: '项目1' }]};}
};
</script>

页面展示

2. 或 (OR) - `||`

功能：如果第一个操作数为真，则返回第一个操作数的值；否则返回第二个操作数的值。
模板中的应用：常用于提供默认值或多条件判断。

<template><div><!-- 提供默认值：如果 user.name 是假值（如空字符串、undefined），则显示‘游客’ --><p>你好，{{ user.name || '游客' }}！</p><!-- 多条件判断：用户是管理员或内容编辑者时，显示管理面板 --><div v-if="user.role === 'admin' || user.role === 'editor'"><button>管理面板</button></div></div>
</template><script>
export default {data() {return {user: {name: '', // 空名字，会触发默认值role: 'editor'}};}
};
</script>

页面展示

3. 非 (NOT) - `!`

功能：取反操作。如果操作数为真，则返回 false；如果为假，则返回 true。
模板中的应用：常用于取反条件。

<template><div><!-- 当不在加载状态时，显示内容 --><div v-if="!loading"><!-- 页面内容 --><p>内容加载完成！</p></div><div v-else>加载中...</div><!-- 当用户未认证时，显示登录按钮 --><button v-if="!isAuthenticated">登录</button><button v-else>退出</button></div>
</template><script>
export default {data() {return {loading: true,isAuthenticated: false};}
};
</script>

页面展示