vue中的与,或,非

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

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

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


1. 与 (AND) - &&

  • 功能:只有当两个操作数都为真值时,整个表达式才返回真。如果第一个操作数为假,则直接返回第一个操作数的值( falsy value );否则返回第二个操作数的值。

  • 模板中的应用 :常用于条件渲染。例如,"当某个条件成立时,才渲染某个元素"。

    <template>

    欢迎,{{ user.name }}!

    请登录

    复制代码
      <!-- 另一个例子:当数据加载完成且有数据时才显示列表 -->
      <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>

    你好,{{ user.name || '游客' }}!

    复制代码
      <!-- 多条件判断:用户是管理员或内容编辑者时,显示管理面板 -->
      <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>

    内容加载完成!

    加载中...
    复制代码
      <!-- 当用户未认证时,显示登录按钮 -->
      <button v-if="!isAuthenticated">登录</button>
      <button v-else>退出</button>
    </div>
    </template> <script> export default { data() { return { loading: true, isAuthenticated: false }; } }; </script>

页面展示

相关推荐
柳杉4 小时前
使用three.js搭建3d隧道监测-3
前端·javascript·three.js
1024小神4 小时前
vue/react项目如何跳转到一个已经写好的html页面
vue.js·react.js·html
携欢5 小时前
PortSwigger靶场之Reflected XSS into HTML context with nothing encoded通关秘籍
前端·xss
lggirls6 小时前
特殊符号在Html中的代码及常用标签格式的记录
前端·javascript·html
乖女子@@@7 小时前
Vue-Pinia
前端
Github项目推荐7 小时前
你的中间件一团糟-是时候修复它了-🛠️
前端·后端
deepdata_cn7 小时前
基于JavaScript的智能合约平台(Agoric)
javascript·区块链·智能合约
Bacon7 小时前
JWT 鉴权:小白友好版讲解 + 图形化拆解
前端
Maschera968 小时前
扣子同款半固定输入模板的简单解决方案
前端·react.js