首页 > 其他分享 >004.Vue3入门,使用绑定属性时undefined和disabled用法

004.Vue3入门,使用绑定属性时undefined和disabled用法

时间:2024-08-10 14:54:43浏览次数:9  
标签:undefined appclass 004 disabled 测试 Vue3

1、代码如下:

<template>
  <div v-bind:id="myId1" v-bind:class="testCls">测试1</div>
  <div v-bind:id="myId2" v-bind:title="testTitle">测试2</div>
  <div :id="myId3" :class="testCls">测试2</div>
  <button :disabled="isButtonDisabled">按钮</button>
</template>

<script>
export default {
  data() {
    return {
      testCls: "appclass",
      myId1: "appId1",
      myId2: "appId2",
      myId3: "appId3",
      title: undefined,
      isButtonDisabled: true
    }
  }
}
</script>

<style>
.appclass {
  color: red;
  font-size: 30px;
}

</style>

2、效果如下:

 

标签:undefined,appclass,004,disabled,测试,Vue3
From: https://www.cnblogs.com/tianpan2019/p/18352284

相关文章

  • 002.Vue3入门,使用模板语法的一些高级功能
    1、代码如下:<template><h3>模板语法</h3><p>{{msg}}</p><p>{{msg_cn}}</p><p>{{number+1}}</p><p>{{ok?'Yes':'No'}}</p><p>{{message.split("......
  • useImperativeHandle 是什么?你可以理解为 vue3 的 expose
    useImperativeHandle确实类似于Vue3的expose,两者都用于控制子组件向父组件暴露的接口。在React中,useImperativeHandle需要与forwardRef一起使用,原因如下:转发引用:forwardRef允许父组件将ref传递给子组件。没有forwardRef,父组件无法直接访问子组件的ref。......
  • Vue3的学习---4
    4.Vue组件4.1初始Vue组件4.1.1根组件根组件的主要作用是:初始化应用程序。提供全局的状态管理或配置。作为其他组件的容器,构建整个应用程序的组件树。通过根组件,开发者可以控制应用程序的整体结构和行为,确保各个部分能够协同工作。<body><divid="app"></div>......
  • Vue3项目创建及相关配置
    Vue是一种用于构建用户界面的JavaScript框架。它采用了一种称为MVVM(Model-View-ViewModel)的架构模式。MVVM是一种将用户界面与业务逻辑和数据分离的设计模式。它包括三个部分:Model(模型):表示应用程序的数据和业务逻辑。在Vue中,模型通常是一个JavaScript对象。View(视图):表示......
  • Django5+Vue3:OA系统前后端分离项目实战-Frame页面框架搭建(14)
    Django5+Vue3系列文章前言本节开始,全文仅对会员开放。若点赞和收藏数量超过100,全文将免费开放。此项目采用Django框架的5.0.7版本进行开发。Django5.0支持的Python版本为3.10、3.11和3.12。OA系统系列文章将持续更新,直至项目的Docker部署阶段。专栏链接:......
  • 前端vue3学习记录二
    ref和reactive的补充在使用reactive 进行对象数据的响应化时,要注意,将响应式对象分配给一个新的对象的时候,新的对象是不具有响应式性质的functionChangecar(){car={brand:'红旗',price:20000}//没有响应式性质car=reactive({brand:'红旗',price:20......
  • Vue3实现印章徽章组件
    1、组件结构2、组件封装src/components/StampBadge/src/StampBadge.vue文件代码<template><divclass="first-ring"v-bind="getBindValue":class="getStampBadgeClass"><divclass="second-ri......
  • Vue3水印组件
    1、组件封装<template><divref="watermarkContainerRef"class="watermark-container"><!--插槽--><slot></slot></div></template><scriptsetup>import{ref,onMounted,watc......
  • Vue3入门项目 简洁清晰保姆级内容讲解
    序章vue3的后台管理项目,从0到1搭建,内容非常丰富涵盖项目搭建、路由配置、用户鉴权、首页报表、用户列表、前后端联调等功能,推荐指数:5颗星!视频学习链接:vue3通用后台管理-零基础从0到1详细的入门保姆级别教程——哔哩哔哩bilibili环境配置node版本:需要Node.js版本1......
  • Vue3拖拽功能 vue-draggable-plus
    Vue拖拽功能vue-draggable-plus,支持V2和V3文章目录Vue拖拽功能vue-draggable-plus,支持V2和V3介绍VueDraggablePlus一、使用说明版本支持安装二、使用实例1.双列表拖拽2.更多拖拽效果总结介绍VueDraggablePlus最近需要pc上做拖拽功能,之前在移动端使用的是Sor......