uniapp数据绑定

1，uniapp数据绑定。
uni-app数据绑定分两种情况：
①在标签内部绑定使用：{{参数}}
②标签内部绑定使用：例：:value=‘参数’ 也就是标签内属性绑定参数要多加个：

2，data(){}：存放数据，在data(){}中return，然后去绑定数据。

<template><view class="content"><text class="title">{{title}}</text>//Hello<input type="text" value="subTitle" />//subTitle</view>
</template><script>
export default {data() {//存放数据return {title: 'Hello'}}
}
</script>

3，数组绑定

<template><view class="content"><view v-for="(fruit,index) in fruits" :key='index'>种类:{{fruit.name}}——颜色{{fruit.color}}</view></view>
</template>
<script>export default {data() {return {fruits: [{name:'苹果',color:'red'},{name:'香蕉',color:'yellow'},{name:'橙子',color:'orange'},]}}}
</script>

效果：

说明：如果要绑定的数据是个数组，这个时候就需要循环绑定，循环使用 v-for，紧接着用到了 :key。key是为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key属性。
注意：key的取值必须是number 或 string，不能是对象，而且使用 v-for 循环的每一项的值，都要保证唯一性。

3，条件渲染（v-if；v-hidden）。

<template><view><view v-for="(item, index) in students"><view class="persons">{{index}} - {{item.name}}</view></view><view v-if="show">true显示！false隐藏！</view><view v-hidden="display">我在这里哦~</view></view>
</template>
<script>
export default {data(){return{students : [{name : "张三", age : 18},{name : "李四", age : 20},{name : "王五", age : 28},{name : "赵六", age : 22}],}
//true显示，flase不显示show:false;display:true},
}
</script>

说明：if会根据条件决定是否渲染，hidden 会渲染但根据条件决定是否展示。

uniapp数据绑定相关推荐

霍常亮教你开发淘宝客app第11节：uniapp数据绑定
霍常亮淘宝客教你开发app第11节:uniapp数据绑定每日更新一节课之前录制的收费培训课程,现在免费分享给大家! 您的关注和点赞是我更新的最大动力! 更多教程以及合作请关注微信公众号:霍常亮创业 ...
uni-app 数据绑定 v-model
将输入框的内容绑定到数组,并将输入框赋值为空
uni-app入门并使用学习
笔记课程工具准备下载HBuilderX 点击下载HBuilderX 下载微信开发者工具点击下载微信开发者工具使用参考uni-app官网官网新建项目运行文件---新建----项目运行到谷 ...
语法速通 uni-app随笔【uni-app】【微信小程序】【vue】
文章目录 1.微信小程序 1.1.wx 小程序工程目录 1.2.wx 小程序标签 1.3.wx 小程序数据绑定 1.4.wx 小程序条件判断 1.5.wx 小程序列表渲染 2.uni-app ...
uni-app中的数据绑定
uni-app中的数据绑定在页面中需要定义数据,和我们之前的vue一模一样,直接在data中定义数据即可 export default {data () {return {msg: 'hello-u ...
uni-app（7）— 数据绑定以及 v-bind，v-for，v-on
此文为uni-app总结笔记(7)- 数据绑定以及 v-bind,v-for,v-on 在页面中需要定义数据,和我们之前的vue一摸一样,直接在data中定义数据即可 export default ...
uni-app入门:WXML数据绑定
1.简单数据绑定 2.组件属性数据绑定 3.运算绑定 3.1三元运算符 3.2算数运算 3.3字符串拼接运算 ...
uniapp动态显示数组_uni-app学习：4、数据绑定（变量、数组、显示控制）
基本等同与vue,把代码跑一下,看看就明白了. 其中, v-hidden 貌似不管是 true or false 都有显示 v-show 才切换. 和vue 一样,数组循环中要加key绑定,只不 ...
Uni-App - 模板语法 - 数据绑定
基础数据绑定变量赋值: <script> export default {data: {title: 'Hello',name : 'hcoder'}, ..... 在视图中使用 {{} ...

uniapp数据绑定

uniapp数据绑定相关推荐

最新文章

热门文章