vue（uni-app）中动态绑定属性的写法

最新推荐文章于 2024-07-25 14:23:08 发布
最新推荐文章于 2024-07-25 14:23:08 发布
阅读量3.7k 收藏 1
点赞数
分类专栏： Vue uniapp 文章标签： vue uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43468165/article/details/116193307
版权
Vue 同时被 2 个专栏收录
46 篇文章 1 订阅
订阅专栏
uniapp
12 篇文章 1 订阅
订阅专栏

我们常用需要动态来绑定的属性有哪些
1.class
2.style
3.v-text/v-html
所为动态绑定，就是因情况而定，不同的条件下可能要求显示不同的效果和数据，通常使用的方法有三目运算，有的也可以接住对象写判断因情况而定
三目运算的v-text/v-html

 <view class="title" v-text="parma.type=='1'?'上传作业':'上传考试'"></view>

这里面的 v-text不能加“：”了，因为它本身不加的时候的用法里面就可以传变量。
这里写成下面对象里面加判断这种格式就有问题

 <view :v-text="{'你好':paihang==1,'我不好':paihang==2||paihang==3}" @click="paihangBtn">全国排行</view>

三目运算class,style注意class和style要加“：”的

<view :class="paihang=='3'?'active':'nostyle'">全市排行</view>

下面这种写法比较麻烦但也能成功

 <view :class="{'active':paihang==1,'nostyle':paihang==2||paihang==3}" @click="paihangBtn">全国排行</view>
小胖砸~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp中如何给下拉框动态绑值
明思齐的博客
06-21 3153
在项目中我们会经常遇到新增的功能，而新增的页面中就会有输入框、下拉框、文本域、日期选择框等等。那么在uniapp是如何给下拉框中调用接口动态绑值的呢？请往下看 💨💗 uView官网：介绍 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
uni-app【事件绑定、下拉刷新、上传图片、导航跳转、组件通讯】
December_shi的博客
06-08 1370
uni事件绑定、事件传参；uni生命周期；下拉刷新；上传图片、预览图片；uni导航跳转；创建组件；组件通讯，父子传值，兄弟组件通讯
uni-app属性值的动态绑定
Mr_Runner的博客
06-16 9041
1.问题 使用传统的方法给标签的属性动态绑定数据报错。 2.错误重现 2.1 错误代码 <image src="{{imgeSrc}}"></image> 2.2 错误信息 Module Error (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js): 10:01:33.690 (Emitted value instea
uni-app基本的数据绑定v-bind,v-for,v-on:click
最新发布
蚂蚁搬家
07-25 526
数据绑定事件
动态绑定
boomery的专栏
10-31 291
@dynamic告诉编译器,属性的setter与getter方法由用户自己实现，不自动生成。（当然对于readonly的属性只需提供getter即可）。假如一个属性被声明为@dynamic var，然后你没有提供@setter方法和@getter方法，编译的时候没问题，但是当程序运行到instance.var =someVar，由于缺setter方法会导致程序崩溃；或者当运行到 someVar
uniapp @click点击事件传递参数
qq_37455326的博客
01-12 409
click="seearticle(item._id)"传递了一个id。这个方法接收到了一个传递过来的值。
使用SASS
一个孤独漫步者的遐想的博客
02-07 214
使用SASS index.vue <template> <view class="content box" > <image class="logo" src="/static/logo.png"></image> </view> </template> <script> </script> <style lang="scss"> $width:200rpx; //定
uni-app 组件里面获取元素宽高的实现
10-15
uni-app作为一个使用Vue.js开发所有前端应用的框架，提供了跨平台的能力，它允许开发者编写一次代码，然后发布到iOS、Android、Web（包括各种小程序）等多个平台。在开发过程中，经常会遇到需要获取页面元素宽高的...
Vue3 + Ts + Pinia + uni-app 学习笔记
qq_33365152的博客
09-13 446
Vue3 +Ts + Pinia + uni-app 学习笔记
uni-app面试题
admin12345671的博客
04-16 5978
入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";
vue h5转换uni-app指南（vue转uni、h5转uni）
qq_35744728的博客
03-27 6030
如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。 首先注意2个前提：1、你的web站是适合手机屏幕的；2、你的H5代码是全后端分离的，uni-app只处理前端代码。 一切从新建一个uni-app项目开始。然后依次进行 文件处理 把之前的vue web项目的前端代码copy到新项目下 如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件SFC规范，比如必须一级根节点为template、script、style，template节点下必须且只能有一个根vi
uniapp--动态设置input的type属性会使input样式失效
Junikusa的博客
07-27 2060
uniapp--动态设置input的type属性会使input样式失效
uniapp小程序：追加数组中的对象属性，属性数据已经添加，视图不会改变
weixin_44967080的博客
01-07 3670
uniapp小程序：追加数组中的对象属性，属性数据已经添加，视图不会改变
uniapp框架组件、props对组件传值、对组件绑定事件的使用、子组件给父组件传值
紫月i的博客
04-14 8948
新建组件的方式，在components目录下新建组件，然后就能在pages页面当中直接使用该组件 test.vue <template> <view> test </view> </template> <script> export default { name:"test", data() { return { }; } } </script> <style lang="scs
uniapp和小程序事件参数传递
snoto的专栏
01-20 4542
文章目录uniAPP实现小程序的实现官方文档如下 比如我们点击列表里面的Item的时候，就用到向事件传递参数 uniAPP实现 uniAPP的实现比较简单，比如： @click="startCharge(item)" 直接像普通Java那样传递参数就可以了，js中函数的声明也可以直接使用 startCharge: function(item) {｝ 小程序的实现 小程序的实现方式比较麻烦，事...
vue、uniapp中动态添加绑定style、class 9种方法实现
一步一个脚印，踏实努力，向着目标前进
08-31 9275
使用场景：当class和style属性是固定不变的时候，可以直接在模板中写死。优点：简单直接，没有额外的计算和逻辑。缺点：无法根据条件动态修改class和style。使用场景：当class和style属性需要根据组件的data或props属性动态变化时，可以使用v-bind来动态绑定。优点：可以根据条件动态修改class和style。缺点：需要在模板中写表达式，有一定的复杂度。使用场景：当class和style属性的计算逻辑比较复杂时，可以使用计算属性来生成class和style对象。
uniapp：如何在数组中添加新的对象和删除对象，以及更改对象中的属性（vue）
m0_65069237的博客
09-26 5572
'':''}}删除</button></li><input v-model="newItemName" placeholder="请输入新对象的名字"><input v-model="newItemImage" placeholder="请输入新对象的图片"><button @click="addItem">添加</button>
uniapp关于绑定属性的使用
weixin_47818467的博客
04-22 1859
<template> <view class="page"> <view class="uni-form-item uni-column"> //关键 :key="item.value" <view v-for="(item,index) in formList" :key="item.value" class="with-fun"> <input class="uni-input" placeholder="请输入" :
uniapp 全局变量
weixin_51867622的博客
03-02 542
1.在APP.vue中设置globalData <script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') }, globalData:{ id:"666666
uni-app中vue页面如何动态与组件绑定
05-22
在Vue中使用动态绑定可以实现在组件中动态修改数据，其中最常用的方法是使用v-bind指令。 示例： 假设我们有一个组件名为HelloWorld，它的模板如下： ``` <template> <div> <p>{{message}}</p> <button @click="changeMessage">Change Message</button> </div> </template> <script> export default { name: 'HelloWorld', data () { return { message: 'Hello World!' } }, methods: { changeMessage () { this.message = 'Hello Vue!' } } } </script> ``` 在父组件中，我们可以使用v-bind指令将一个属性与子组件中的数据绑定起来。例如，我们可以将message属性与子组件中的message数据绑定，如下所示： ``` <template> <div> <hello-world :message="parentMessage"></hello-world> <button @click="changeParentMessage">Change Parent Message</button> </div> </template> <script> import HelloWorld from '@/components/HelloWorld' export default { name: 'App', components: { HelloWorld }, data () { return { parentMessage: 'Hello Parent!' } }, methods: { changeParentMessage () { this.parentMessage = 'Hello Uni-App!' } } } </script> ``` 现在，我们可以在父组件中使用changeParentMessage方法来改变parentMessage的值，并且该值会传递给子组件中的message数据，从而动态更新子组件中的内容。 需要注意的是，使用v-bind指令时，属性名需要使用v-bind:attr或者:attr的简写方式来绑定。其中，attr为要绑定的属性名，例如:message表示绑定子组件中的message属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值