<template>
<view class="content" :class="className" @click="open">
<!-- 双向绑定 -->
姓名:{{ name }}
<!-- 双向绑定 -->
<!-- IF 语句的使用 -->
<view class="content" :class="className" v-if="is_show">
IF==Ture 语句
</view>
<view class="content" :class="className" v-if="is_true=='show' ">
is_true=='show' 的时候显示
</view>
<button @click="changeIF">隐藏IF语句</button>
<!-- IF 语句的使用 -->
<!-- FOR 语句的使用 -->
<view class="content" :class="className" v-for="item,index in data_list">
{{ item.name }} -- {{ item.id }} -- {{ index }}
</view>
<!-- FOR 语句的使用 -->
<!-- 基础组件的使用 注意：组件属性一定是放在属性标签内的，显示的效果是放在属性组件里面的标签内进行显示-->
<view>
<scroll-view class="scroll" scroll-y="true" @scroll="scroll" show-scrollbar="true" enable-flex="true">
<view v-for="item in 50" >
{{ item }}
</view>
</scroll-view>
<input class="uni-input" placeholder="请输入值" v-model="text"/>
<button @click="beatIt">打印输入框的值</button>
<view>输出的值：{{ input_text }}</view>
</view>
<!-- 基础组件的使用 -->
<!-- 自定义组件 -->
<view>
<!-- 条件编译 #ifndef 除了哪个平台都编译 -->
<!-- #ifdef H5 || APP-PLUS || MP-WEIXIN -->
<btn class="color"></btn> <!-- 使用导入的本地样式包 样式名-->
<!-- #endif -->
<!-- 条件编译 -->
</view>
<!-- 自定义组件 -->
</view>
</template>
<script>
/* 只要导入就可以使用*/
import btn from "../../components/btn/btn.vue"
export default {
// 声明一下导入组件
components:{
btn,
},
/* 数据默认定义 */
data() {
return {
name: "wanghong",
className: 'active',
is_show: true,
is_true: "",
input_text: "",
text:"",
data_list: [{
id: 1,
name: 'wanghong'
},
{
id: 2,
name: 'zhangsan'
},
{
id: 3,
name: 'lisi'
},
],
}
},
// 页面加载的时候
onLoad() {
// 条件编译 #ifdef
/* 使用封装好的API */
uni.getSystemInfo({
success(res) {
console.log(res)
},
fail(err) {
console.log(err)
},
complete(mes) {
console.log(mes)
}
})
},
// 监听页面的初次渲染完成
onReady() {
console.log("监听页面的初次渲染完成")
},
// 监听页面显示
onShow() {
console.log("监听页面显示")
},
// 监听页面隐藏
onHide() {
console.log("监听页面隐藏")
}
// 监听页面卸载
onHide() {
console.log("监听页面卸载")
}
methods: {
// 条件编译 #ifdef
/* 双向绑定 */
open() {
// console.log("我被点击了")
this.name = "我被修改了"
// this.className = 'scroll' # 点击后更换CLASS样式名
},
/* IF语句 */
changeIF() {
this.is_show = false
this.is_true = "show"
console.log(this.is_true)
},
/* 基础组件的使用 */
scroll(e) {
// console.log(e)
},
refresher(){
console.log("我被啦了")
},
beatIt(){
this.input_text = this.text
},
}
}
</script>
<style>
/* 导入样式包 */
/* @import url(""); */ /* 导入CDN*/
@import "./index.css"; /* 导入本地*/
/* 条件编译 #ifdef */
.active {
color: #4CD964;
}
.scroll {
height: 100px;
border: #007AFF 1px solid;
}
page{
/* 背景颜色 */
background-color: #007AFF;
}
</style>