推荐阅读
  • Vue3 样式绑定

    Vue3 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时, 表达式除了可以使用字符串之外,还可以是对象或数组。 v-bind:class 可以简写为 :class。 class 属性绑定 我们可以为 v-bind:class 设置一个对象,

  • Vue3 安装

    Vue3 安装 1、独立版本 我们可以在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。 下载 Vue.js 2、使用 CDN 方法 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。 Staticfile CDN(国内) : https://cdn.staticfile.org/vue/3.

  • Vue3 起步

    Vue3 起步 刚开始学习 Vue,我们不推荐使用 vue-cli 命令行工具来创建项目,更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。 Vue3 中的应用是通过使用 createApp 函数来创建的,语法格式如下: const app = Vue.createApp({ /* 选项 */ }) 传递给 createApp 的选项用于配置根组件。在使用 mount()

  • Vue3 计算属性

    Vue3 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1 [mycode3 type='html'] {{ message.split('').reverse().join('') }} [/mycode3] 尝试一下 » 实例 1

  • Vue3 Ajax(axios)

    Vue3 Ajax(axios) Vue 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Github开源地址: https://github.com/axios/axios 安装方法 使用 cdn: 或 使用 npm: $ npm install axios 使用 bo

  • Vue3 混入

    Vue3 混入 混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。 来看一个简单的实例: 实例 [mycode3 type='js'] // 定义混入对象 const myMixin = { created() { this.hello() },

  • Vue3 循环语句

    Vue.js 循环语句 循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: v-for 实例 [mycode4 type='html'] {{ site.text }}

  • Vue3 目录结构

    Vue3 目录结构 上一章节中我们使用了 npm 安装项目(Vue-cli 和 Vite),我们在 IDE(Vscode、Atom等) 中打开该目录,结构如下所示: 命令行工具 vue-cli(爱学习网-vue3-test): Vite(爱学习网-vue3-test2) 目录解析 目录/文件 说明 build 项目构建(webpack)相关代码 confi

  • Vue3 自定义指令

    Vue3 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例 [mycode3 type='html'] 页面载入时,input 元素自动获取焦点: const app = Vue.createA

  • Vue3 路由

    Vue3 路由 本章节我们将为大家介绍 Vue 路由。 Vue 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue 可以实现多视图的单页 Web 应用(single page web application,SPA)。 Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router 文档。 安装 1、直接下载 / CDN https://unpkg.co

Vue3 条件语句

条件判断

v-if

条件判断使用 v-if 指令,指令的表达式返回 true 时才会显示:


在元素中使用 v-if 指令:

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
const app = {
  data() {
    return {
      seen: true /* 改为false,信息就无法显示 */
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

这里, v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。

因为 v-if 是一个指令,所以必须将它添加到一个元素上。如果是多个元素,可以包裹在 <template> 元素上,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。


在 <template> 元素上使用 v-if 指令:

<div id="app">
    <template v-if="seen">
        <h1>网站</h1>
        <p>Google</p>
        <p>lvstudy</p>
        <p>Taobao</p>
    </template>
</div>
    
<script>
const app = {
  data() {
    return {
      seen: true /* 改为false,信息就无法显示 */
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块:


随机生成一个数字,判断是否大于 0.5,然后输出对应信息:

<div id="app">
    <div v-if="Math.random() > 0.5">
      随机数大于 0.5
    </div>
    <div v-else>
      随机数小于等于 0.5
    </div>
</div>
    
<script>
Vue.createApp(app).mount('#app')
</script>

v-else-if

v-else-if 即 v-if 的 else-if 块,可以链式的使用多次:


判断 type 变量的值:

<div id="app">
    <div v-if="type === 'A'">
         A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
const app = {
  data() {
    return {
      type: "C" 
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

我们也可以使用 v-show 指令来根据条件展示元素:


<h1 v-show="ok">Hello!</h1>
关于我们 免责声明 联系我们
Copyright © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图