<template>
<view class="content">
<text> 我是首页 </text>
<!-- 输出纯字符串 -->
{{"huoyan"}}
<view>{{msg}}</view>
<!-- 字符串的拼接 -->
<view>{{'我是'+msg}}</view>
<!-- 三元表达式 -->
<view>{{ 'huoyan'.indexOf('huo')!== -?'最美的妹纸':'no'}}</view>
<view>{{ '我爱北京天安门'.slice(,)}}</view>
<view>{{ false||''||'老铁 买了个表'}}</view>
<!-- 动态绑定一个值 -->
<image :src="url"></image>
<!-- 属性绑定可以用字符串拼接 -->
<view :class="'box'+11">天王盖地虎</view>
<!-- 动态的绑定一个类 -->
<view :style="{width:'100px',height:'100px',background:'red'}"></view>
<view :style="[{width:'100px',height:'100px',background:'green'}]"></view>
<!-- 三元表达式 -->
<view :class="{box1:true}"></view>
<!-- 绑定多个值 -->
<view :class="['box1','box2']"></view>
<!-- 循环数组 注意要绑定key -->
<!-- 定义一个方法 让他点击的时候切换类 -->
<view v-for="(item,index) in names" :key="index" :class="{box3:index == index1}" @click="dianji(index)">
{{item.name+'---'+item.age}}
</view>
</view>
</template> <script>
import test from "../../components/test.vue"
export default {
data() {
return {
msg: "小白",
url: 'https://www.baidu.com/img/bd_logo1.png',
index1: ,
names: [{
name: '李白',
age:
},
{
name: '杜甫',
age:
},
{
name: '张三',
age:
}
],
}
},
onLoad() {},
methods: {
dianji(index) {
this.index1 = index
}
}
}
</script> <style>
.box1 {
width: 50px;
height: 50px;
background: #DD524D;
} .box2 {
border: 1px solid #4CD964;
} .box3 {
background: #4CD964;
}
</style>

uni-app学习记录02-属性绑定.for循环的更多相关文章

  1. angular 组件学习-组件内属性绑定

    #组件内的属性(元素的属性)绑定(property binding) 应用场景:通过改变DOM元素的属性,动态显示/隐藏一个元素 知识点:HTML 属性与DOM属性的区别 改变HTMl属性,浏览器需要 ...

  2. Vue学习之vue属性绑定和双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. &quot;美团&quot;APP学习记录知识点

    1.APP进入加载广告视图展示: -(void)initAdvView{ // 判断图片是否已经存在 NSArray *paths = NSSearchPathForDirectoriesInDoma ...

  4. 【Updating】汇编语言学习记录02

    换码指令.字符的输出 前置知识: XLAT 指令:将BX指定的缓冲区中.AL指定的位移处的一个字节数据取出赋给AL,实际相当于(AL) = (DS:(BX+AL)).注意,不是单纯地赋予AL+BX,而 ...

  5. vue学习12-表单属性绑定

    1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <meta charset='UTF-8'> 5 < ...

  6. Qt学习记录--02 Qt的信号槽机制介绍(含Qt5与Qt4的差异对比)

    一 闲谈: 熟悉Window下编程的小伙伴们,对其消息机制并不陌生, 话说:一切皆消息.它可以很方便实现不同窗体之间的通信,然而MFC库将很多底层的消息都屏蔽了,尽管使用户更加方便.简易地处理消息,但 ...

  7. react+redux+react-router+node.js 开发实时聊天App 学习记录

    一.课程导学 1.React 主要解决的是UI层的问题,应用的状态需要借助Redux等状态管理. 2.前端React  +  antd-mobile UI组件库 + Redux 状态管理库 + Rea ...

  8. 02 | 日志系统:一条SQL更新语句是如何执行的? 学习记录

    <MySQL实战45讲>02 | 日志系统:一条SQL更新语句是如何执行的? 学习记录http://naotu.baidu.com/file/ad320c7a0e031c2d6db7b5a ...

  9. UWP学习记录4-设计和UI之控件和模式1

    UWP学习记录4-设计和UI之控件和模式1 1.控件和事件简介 在 UWP 应用开发中,控件是一种显示内容或支持交互的 UI 元素. 控件是用户界面的构建基块. 我们提供了超过 45 种控件供你使用, ...

随机推荐

  1. Python小练习三

    # 检查用户名和PIN码 database = [ ['], ['], ['], ['] ] username = input('User name:') pin = input('PIN code: ...

  2. asp.net mvc下的多语言方案 包含Html,Javascript和图片

    在网上查阅了众多方案,觉得路过秋天的方案 解耦性比较好,可以不使用微软的Resource文件,而是将所有的词汇放入在一个txt的词典之中,便于维护. 步骤如下: 1)在整个程序的入口处global.a ...

  3. C#多线程网摘 2

    C#中,可以使用Thread类来处理(包含创建,启动,挂起,恢复,终止等操作)线程.本文将介绍如何使用Thread类来创建与启动新线程. Thread类类位于System.Threading命名空间中 ...

  4. xamarin android——数据绑定到控件(一)

    mono for android 中光标由ICursor 接口标识,该接口公开了操作结果数据集的所有方法.光标的使用非常消耗系统资源,所以不使用时应该光比光标.可以通过StartManagingCur ...

  5. 关于Kingfisher--备用

    序言--感谢好心大神分享 Kingfisher 是由 @onevcat 编写的用于下载和缓存网络图片的轻量级Swift工具库,其中涉及到了包括GCD.Swift高级语法.缓存.硬盘读写.网络编程.图像 ...

  6. cocos2dx 的Hello world的简单分析

    Node之间的关系: 场景AppDelegate.cpp又要由导演去调用然后进行表演: // create a scene. it's an autorelease object auto scene ...

  7. Apollo 7 — ConfigService 消息扫描设计实现

    目录 设计 代码实现 总结 1.设计 Apollo 为了减少依赖,将本来 MQ 的职责转移到了 Mysql 中.具体表现为 Mysql 中的 ReleaseMessage 表. 具体官方文档可见:发送 ...

  8. ccc切割刚体

    // http://www.emanueleferonato.com/2011/08/05/slicing-splitting-and-cutting-objects-with-box2d-part- ...

  9. Dynamic Shortest Path CodeForces - 843D (动态最短路)

    大意: n结点有向有权图, m个操作, 增加若干边的权重或询问源点为1的单源最短路. 本题一个特殊点在于每次只增加边权, 并且边权增加值很小, 询问量也很小. 我们可以用johnson的思想, 转化为 ...

  10. faker php测试数据库生成2

    因内容太长,被csdn截断了,只好把另外的内容写到这里. //Biased // 在10到20之间得到一个随机数字,有更大的几率接近20 echo $faker->biasedNumberBet ...