推荐阅读
  • Vue3 路由

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

  • Vue3 模板语法

    Vue3 模板语法 Vue 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值 文本 数据绑定最常见的形式就是使用 {{...}}(双大括号)的文

  • Vue3 教程

    Vue3 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单,本教程基于 Vue 3.0.5 版本测试。 阅读本教程前,您需要了解的知识: HTML CSS JavaScript

  • Vue3 循环语句

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

  • Vue3 条件语句

    Vue3 条件语句 条件判断 v-if 条件判断使用 v-if 指令,指令的表达式返回 true 时才会显示: v-if 指令 在元素中使用 v-if 指令: [mycode3 type='html'] 现在你看到我了 const app = { data() { return { seen: true /* 改为false

  • Vue3 起步

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

  • Vue3 安装

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

  • Vue3 事件处理

    Vue3 事件处理 我们可以使用 v-on 指令来监听 DOM 事件,从而执行 JavaScript 代码。 v-on 指令可以缩写为 @ 符号。 语法格式: v-on:click='methodName' 或 @click='methodName' v-on [mycode3 type='html'] 增加 1 这个

  • Vue3 监听属性

    Vue3 监听属性 本章节,我们将为大家介绍 Vue3 监听属性 watch,我们可以通过 watch 来响应数据的变化。 以下实例通过使用 watch 实现计数器: 实例 [mycode3 type='html'] 计数器: {{ counter }} 点我 const app = { data() { return {

  • Vue3 目录结构

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

Vue3 样式绑定

Vue.js class

class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时, 表达式除了可以使用字符串之外,还可以是对象或数组。

v-bind:class 可以简写为 :class

class 属性绑定

我们可以为 v-bind:class 设置一个对象,从而动态的切换 class:


实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示:

<div :class="{ 'active': isActive }"></div>

以上实例 div class 渲染结果为:

<div class="active"></div>

我们也可以在对象中传入更多属性用来动态切换多个 class 。

此外,:class 指令也可以与普通的 class 属性共存。


text-danger 类背景颜色覆盖了 active 类的背景色:

<div class="static" :class="{ 'active' : isActive, 'text-danger' : hasError }">
</div>

以上实例 div class 渲染结果为:

<div class="static text-danger"></div>

当 isActive 或者 hasError 变化时,class 属性值也将相应地更新。例如,如果 active 的值为 true,class 列表将变为 "static active text-danger"。

我们也可以直接绑定数据里的一个对象:


text-danger 类背景颜色覆盖了 active 类的背景色:

<div id="app">
    <div class="static" :class="classObject"></div>
</div>

实例 3 与 实例 2 的渲染结果是一样的。

此外,我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:


data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

我们可以把一个数组传给 v-bind:class ,实例如下:


<div class="static" :class="[activeClass, errorClass]"></div>

以上实例 div class 渲染结果为:

<div class="static active text-danger"></div>

我们还可以使用三元表达式来切换列表中的 class :


errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:

<div id="app">
    <div class="static" :class="[isActive ? activeClass : '', errorClass]"></div>
</div>

以上实例 div class 渲染结果为:

<div class="static text-danger"></div>

Vue.js style(内联样式)

我们可以在 v-bind:style 直接设置样式,可以简写为 :style


<div id="app">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">爱学习网教程</div>
</div>

以上实例 div style 渲染结果为:

<div style="color: red; font-size: 30px;">爱学习网教程</div>

也可以直接绑定到一个样式对象,让模板更清晰:


<div id="app">
  <div :style="styleObject">爱学习网教程</div>
</div>

v-bind:style 可以使用数组将多个样式对象应用到一个元素上:


<div id="app">
  <div :style="[baseStyles, overridingStyles]">爱学习网教程</div>
</div>

注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。

多重值

可以为 style 绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex。

组件上使用 class 属性

当你在带有单个根元素的自定义组件上使用 class 属性时,这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。


<div id="app">
    <lvstudy class="classC classD"></lvstudy>
</div>
 
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 lvstudy的新全局组件
app.component('lvstudy', {
    template: '<h1 class="classA classB">I like lvstudy!</h1>'
})
 
app.mount('#app')
</script>

以上实例 div class 渲染结果为:

<h1 class="classA classB classC classD">I like lvstudy!</h1>

对于带数据绑定 class 也同样适用:

<my-component :class="{ active: isActive }"></my-component>

当 isActive 为 true 时,HTML 将被渲染成为:

<p class="active">Hi</p>

如果你的组件有多个根元素,你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作:


<div id="app">
    <lvstudy class="classA"></lvstudy>
</div>
 
<script>
const app = Vue.createApp({})
 
app.component('lvstudy', {
  template: `
    <p :class="$attrs.class">I like lvstudy!</p>
    <span>这是一个子组件</span>
  `
})
 
app.mount('#app')
</script>

注意:template 中 ` 是反引号,不是单单引号 '

以上实例 div class 渲染结果为:

<div id="app" data-v-app=""><p class="classA">I like lvstudy!</p><span>这是一个子组件</span></div>

关于我们 免责声明 联系我们
Copyright © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图