0
点赞
收藏
分享

微信扫一扫

uni-app学习笔记(1):模板语法


文章目录

  • ​​下载uni-app开发工具HBuilderX​​
  • ​​学习 uni-app 教程​​
  • ​​笔记​​
  • ​​1、显示 hello word 的几种方式​​
  • ​​2、绑定样式的写法​​
  • ​​3、事件绑定​​
  • ​​4、条件渲染​​
  • ​​5、列表渲染​​
  • ​​6、v-model​​

下载uni-app开发工具HBuilderX

1、HBuilderX下载地址: ​​下载地址​​ 2、下载后解压,双击解压后的 HBuilderX.exe 即可打开

​​HBuilderX学习更多​​

学习 uni-app 教程

1、​​uni-app官方视频教程​​​ 2、​​开发uni-app需要的vue2教程​​ 3、​​uni-app零基础入门到项目实战​​


笔记

1、显示 hello word 的几种方式

<template>
<view class="content">
{{text}}
<view v-text="text" class="content"></view>
<view v-html="text" class="content"></view>
</view>
</template>

<script>
export default {
data() {
return {
text:"<p>hello wold</p>"
}
},
}
</script>

<style>

</style>

uni-app学习笔记(1):模板语法_事件绑定

2、绑定样式的写法

<template>
<view :class="myclass" v-bind:style="mystyle">
Hello world
</view>
</template>

<script>
export default {
data() {
return {
mystyle:"font-size:35px;color: #FFFFFF;",
myclass:"content"
}
},
}
</script>

<style>
.content{background:red;}
</style>

uni-app学习笔记(1):模板语法_uni-app_02

3、事件绑定

<template>
<view :class="myclass" v-bind:style="mystyle" v-on:click="myclick">
Hello world
</view>
</template>

<script>
export default {
data() {
return {
mystyle:"font-size:35px;color:#fff",
myclass:"content"
}
},
methods:{
myclick:function(){
this.mystyle = "font-size:35px;color:#000",
this.myclass = ""
}
}
}
</script>

<style>
.content{background:red;}
</style>

uni-app学习笔记(1):模板语法_事件绑定_03

4、条件渲染

<template>
<view>
<view :class="myclass" v-bind:style="mystyle" v-if="show">
Hello world
</view>
<view v-else>你好,世界</view>
<button @click="click">按钮</button>
</view>
</template>

<script>
export default {
data() {
return {
mystyle: "font-size:35px;color:#fff",
myclass: "content",
show: true
}
},
methods: {
click() {
this.show = !this.show;
}
}
}
</script>

<style>
.content {
background: red;
}
</style>

uni-app学习笔记(1):模板语法_uni-app_04

​v-if​​​的 false 隐藏,默认是把所在的 view 给删除
​​​v-show​​​ 则是直接更改样式,​​display:block;​​​-> ​​display:none;​​​ 所以对于频繁进行切换状态,选择​​v-show​​性能更好

需要注意的是 ​​v-if​​​和​​v-else​​元素必须是相邻的才能正常编译

5、列表渲染

uni-app学习笔记(1):模板语法_下载地址_05

<template>
<view>
<view class="" v-for="item in list">
Hello world
{{item}}
</view>

</view>
</template>

<script>
export default {
data() {
return {
list:[1,2,3,4,5]
}
},
methods: {

}
}
</script>

<style>
</style>

可以显示索引

<template>
<view>
<view class="" v-for="(item,index) in list" :key="index">
{{item}}:{{index}}
</view>

</view>
</template>

<script>
export default {
data() {
return {
list:[
'Hello',
'World',
'你好',
'世界'
]
}
},
methods: {

}
}
</script>

<style>
</style>

uni-app学习笔记(1):模板语法_下载地址_06

6、v-model

<template>
<view>
<input type="text" value="" v-model="text" />
<button type="primary" @click="click">提交</button>
<view v-for="(item,index) in list">
{{item}}
</view>

</view>
</template>

<script>
export default {
data() {
return {
text: "",
list: ["hello", "world"]
}
},
methods: {
click() {
this.list.push(this.text)
this.text = ""
}
}
}
</script>

<style>
</style>

uni-app学习笔记(1):模板语法_下载地址_07

举报

相关推荐

0 条评论