Vue.js学习之路

下面的内容主要是把数据保存到本地并且删除，以及在网页上调取api获取里面的内容的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<template>
    <view>
        <!-- 把数据保存到本地缓存中 以键值对的方式对数据进行保存 -->
        <button type="primary" @tap="setValue">设置数据</button>
        <!-- 把数据从本地缓存中获取数据 并且展示到视图上 -->
        <!-- 即将数据给到组件视图 根据key获取到对应的Value值 -->
        <button type="primary" @tap="getValue">获取数据</button>
        <view>
            <!-- 插值表达式 -->
            {{getmsg}}
        </view>
        <view>
            <!-- 插值表达式 -->
            {{getmsg2}}
        </view>
        <br>
        <button type="primary" @tap="removeValue">删除数据（一个一个删除）</button>
        <button type="primary" @tap="clearValue">删除数据（全部删除）</button>
        <br>
        <button type="primary" @tap="setArrValue">设置数组长度</button>
        <button type="primary" @tap="getArrValue">获取数组长度</button>
        <view>
            <!-- 插值表达式 -->
            {{showArray}}
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                msg:"Hello World!",
                msg2:"你好世界",
                // 初始值为空 调用getvalue方法 获取到值后再存储到msg3变量中 最后把数据给回视图
                getmsg:"",// 获取到数据 先保存到getmsg变量中 临时存储数据中
                getmsg2:"",
                array:[
                    {name:"jack",sex:"m"},
                    {name:"lucy",sex:"w"},
                    {name:"lisa",sex:"w"}
                ],
                showArray:"",
            }
        },
        onLoad() {
        },
        methods: {
            setValue(){
                // 把数据保存到本地缓存中 以键值对形式对数据进行输出
                uni.setStorageSync("mykey",this.msg)
                uni.setStorageSync("mykey2",this.msg2)
            },
            getValue(){
                //把数据从本地缓存中获取数据
                this.getmsg = uni.getStorageSync("mykey")
                this.getmsg2 = uni.getStorageSync("mykey2")
            },
            removeValue(){
                // remove是删除本地缓存中的一个键值对，根据key进行删除，需要传参。注意key是字符串类型，需要加双引号
                uni.removeStorageSync("mykey")
            },
            clearValue(){
                // clear是删除本地缓存中的所有键值对数据
                uni.clearStorageSync()
            },
            setArrValue(){
                // 对象转为json字符串
                uni.setStorageSync("myArr",JSON.stringify(this.array))
            },
            getArrValue(){
                // json字符串转对象 变量showArray 临时存储数据
                this.showArray = uni.getStorageSync("myArr")
            }
        }
    }
</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
    <view>
        <view class="list-dmeo" v-for="item,index in arrList" :key="index">
            <image src="../../static/say.jpg" class="limit-img"></image>
            <view class="right-dec">
                <view class="top-title">书名：{{item.bookName}}</view>
                <view class="top-author">作者：{{item.author}}</view>
                <view class="right-price">排名：{{item.ranking}}</view>
                <view class="right-price">阅读量：{{item.read}}</view>
                <view class="right-price">热门好书：{{item.dec}}</view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                arrList:""
            }
        },
        created() {
            this.constApi();
        },
        methods: {
            constApi(){
                uni.request({
                    url:"../../static/server.json",
                    method:'GET',
                    data:{},
                    success:res=>{
                        console.log(res);
                        console.log(res.date);
                        this.arrList = res.data.data;
                    },
                    fail: () => {
                    },
                    complete: () => {
                    }
                });
            }
        }
    }
</script>
<style>
    .list-dmeo {
        display: flex;
        margin-bottom: 20rpx;
    }
    .limit-img {
        width: 200rpx;
        height: 300rpx;
    }
    .right-dec {
        padding-top: 20rpx;
        padding-left: 20rpx;
        padding-bottom: 20rpx;
        flex-direction: column;
        display: flex;
        justify-content: space-between;
    }
    .top-title {
        font-size: 32rpx;
        font-weight: bold;
    }
    .top-author {
        font-size: 30rpx;
        font-weight: bold;
    }
    .right-price {
        font-size: 26rpx;
        font-weight: bold;
    }
</style>