uni-app数据定义和vue的组件方法是一样的,展示方法也一致(双括号语法和v-bind)
<template>
<view class="content">
<view :title="title">{{msg}}</view>
</view>
</template>
<script>
export default {
data() {
return {
msg:"hello world",
title:‘i am a title‘
}
}
}
</script>
uni-app使用v-for进行模版循环,用法与vue一致
<template>
<view class="content">
<view v-for="(item,index) in list" :key="index">{{index}} - {{item}}</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[10,20,30,40]
}
}
}
</script>
还是和vue一样,使用v-if和v-show
<template>
<view class="content">
<view v-if="flag">v-if</view>
<view v-show="flag2">v-show</view>
<view v-show="flag3">false</view>
</view>
</template>
<script>
export default {
data() {
return {
flag:true,
flag2:true,
flag3:false
}
}
}
</script>
还是和vue中的一样,计算属性对data中的数据进行加工过滤,返回处理后的结果。
<template>
<view class="content">
<view v-for="(item,i) in filterList" :key="i">{{i}} -- {{item}}</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[10,20,30,40,50]
}
},
computed:{
filterList(){
//过滤掉20一下的元素
return this.list.filter( item => {
return item > 20
})
}
}
}
</script>
事件监听和方法注册和vue一致
<template>
<view class="content">
<view>{{title}}</view>
<button @click="sayHello">点我触发</button>
<button @click="test(‘修改后的title‘)">点我修改title</button>
</view>
</template>
<script>
export default {
data() {
return {
title:"原来的title"
}
},
methods:{
sayHello(){
console.log(‘hello‘)
},
test(val){
this.title = val
}
}
}
</script>
原文:https://www.cnblogs.com/OrochiZ-/p/13945625.html