vue2 pug 动态class

在Vue2中使用Pug动态添加class的方法如下：

可以使用Vue的动态绑定语法，使用冒号(:)来绑定class属性。例如，如果你有一个data属性叫做`isActive`，你可以通过以下方式来动态添加class：

<template lang="pug">
  div(:class="{ active: isActive }")
</template>

这样，当`isActive`为true时，就会给div元素添加一个名为`active`的class。

相关问题

vue3 pug写法 写一个按钮 按钮里面有一个图片 点击图片的位置可以跳转页面 这个按钮没有边框

在Vue3中结合Pug (也称为HAML)模板引擎，你可以创建一个无边框的按钮，其中包含一个点击事件处理的图片。下面是一个示例：

button(class="no-border", :onclick="$router.push('/your-route')"> <!-- 使用v-bind绑定点击事件 -->
  img(src="/path/to/your/image.jpg", alt="Your Image Description")
</button>

在这个例子中：
- `button`标签表示一个按钮元素。
- `class="no-border"`设置按钮样式为无边框，具体的CSS样式你需要提前定义。
- `:onclick="$router.push('/your-route')"`是一个属性绑定，当用户点击按钮时，会触发Vue Router的导航，跳转到指定的路由 '/your-route'。
- `img`标签用于插入图片，`src`属性指向图片URL，`alt`属性提供图片描述。

记得在你的Vue组件中导入Vue Router，并确保已经配置好路由。如果要在项目中使用Pug，需要先安装并配置Vue Pug插件。

vue3 用pug语法 怎么写 一个页面

在Vue 3中使用Pug (也称为Haml) 插件，你可以将HTML模板转换成更简洁的语法。首先，你需要安装`vue-template-compiler` 和 `pug-plain-loader` 或 `@vue/cli-plugin-pug`。假设你已经配置了Pug，下面是一个简单的例子：

// 使用Pug (Pug文件名通常以.pug结尾)
// pages/index.pug
doctype html
html
  head
    title "我的Vue3 Pug 页面"
  body
    div(class="container")
      h1 Hello, World! // 这里使用Pug的标签缩写形式
    script(src="@/assets/vendors.js") // 引入Vue及依赖
    script(src="@/main.pug") // 这里引入应用的入口点

然后，在`main.js`或`.js` 文件中，通过插件来编译Pug:

import Vue from 'vue'
import App from './App.vue'
import { createApp } from 'vue/create-app'

// 如果使用的是cli-plugin-pug
import PugPlugin from '@vue/cli-plugin-pug'

const app = createApp(App)

// 注册Pug插件
if(process.env.NODE_ENV === 'development') {
  PugPlugin(app)
}

app.mount('#app')