uniapp 空格怎么打_uni-app 基本语法

1.数据定义和展示

uni-app数据定义和vue的组件方法是一样的，展示方法也一致(双括号语法和v-bind)

{{msg}}

export default {

data() {

return {

msg:"hello world",

title:'i am a title'

}

}

}

2.模版循环

uni-app使用v-for进行模版循环，用法与vue一致

{{index}} - {{item}}

export default {

data() {

return {

list:[10,20,30,40]

}

}

}

3.条件编译

还是和vue一样，使用v-if和v-show

v-if

v-show

false

export default {

data() {

return {

flag:true,

flag2:true,

flag3:false

}

}

}

4.计算属性

还是和vue中的一样，计算属性对data中的数据进行加工过滤，返回处理后的结果。

{{i}} -- {{item}}

export default {

data() {

return {

list:[10,20,30,40,50]

}

},

computed:{

filterList(){

//过滤掉20一下的元素

return this.list.filter( item => {

return item > 20

})

}

}

}

5.事件监听和方法注册

事件监听和方法注册和vue一致,在获取当前事件源的标签时使用event.currentTarget

{{title}}

点我触发

点我修改title

export default {

data() {

return {

title:"原来的title"

}

},

methods:{

sayHello(){

console.log('hello')

},

test(val){

this.title = val

}

}

}