vue和ainapp动态获取数据改变背景颜色

简介: vue和ainapp动态获取数据改变背景颜色
<view class="userInfo" :style="'background-image: '+'url( ' + userImg+' ) '">
                <image class="logo-img" src="/static/img/my/defaultAvatarUrl.png"></image>
            <view class="logo-title">
                <text class="uer-name" v-if="hasLogin">{{userInfo.nickname}}</text>
                <text class="uer-name" v-else>都市夜归人</text>
            </view>
        </view>
<script>
    export default {
        data() {
            return {
                userImg: '/static/img/my/headers.png',
                hasLogin: false,
                userInfo: {
                    nickname: '都市夜归人',
                    username: 'admin',
                    mobile: '15201086747'
                },
                gridList: [
                    {
                        icon: 'notification-filled',
                        text: '测试'
                    },
                    {
                        icon: 'notification-filled',
                        text: '测试'
                    },
                    {
                        icon: 'notification-filled',
                        text: '测试'
                    },
                    {
                        icon: 'notification-filled',
                        text: '测试'
                    }
                ],
                sublist: [
                    {
                        title: '问题反馈',
                        icon: 'fire-filled',
                        to: 'www.baiud.com',
                        rightText: '1111',
                        showBadge: true
                    },
                    {
                        title: '设置',
                        icon: 'fire-filled',
                        to: 'www.baiud.com',
                        rightText: '1111',
                        showBadge: true
                    },
                    {
                        title: '关于',
                        icon: 'fire-filled',
                        to: 'www.baiud.com',
                        rightText: '1111',
                        showBadge: true
                    }
                ]
            }
        },
        methods: {
           
        }
    }
</script>


相关文章
|
4天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
11 0
|
3天前
|
监控 JavaScript
Vue中的数据变化监控与响应——深入理解Watchers
Vue中的数据变化监控与响应——深入理解Watchers
|
4天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
13 3
|
4天前
|
JavaScript 前端开发 开发者
Vue的神奇解锁:冒险的开始
Vue的神奇解锁:冒险的开始
5 1
|
5天前
|
JavaScript
【vue实战】父子组件互相传值
【vue实战】父子组件互相传值
10 1
|
5天前
|
JavaScript
vue2_引入Ant design vue
vue2_引入Ant design vue
9 0
|
5天前
|
JavaScript
vue知识点
vue知识点
13 4
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
982 0
|
6天前
|
资源调度 JavaScript 前端开发
Vue的路由管理:VueRouter的配置和使用
【4月更文挑战第24天】VueRouter是Vue.js的官方路由管理器,用于在单页面应用中管理URL路径与组件的映射。通过安装并引入VueRouter,设置路由规则和创建router实例,可以实现不同路径下显示不同组件。主要组件包括:`&lt;router-link&gt;`用于创建导航链接,`&lt;router-view&gt;`负责渲染当前路由对应的组件。此外,VueRouter还支持编程式导航和各种高级特性,如嵌套路由、路由参数和守卫,以应对复杂路由场景。
|
5天前
|
存储 JavaScript 前端开发
【Vue】绝了!这生命周期流程真...
【Vue】绝了!这生命周期流程真...