初识Vue

最新推荐文章于 2020-02-25 17:21:01 发布

小白白007

最新推荐文章于 2020-02-25 17:21:01 发布

阅读量103

点赞数 1

分类专栏：前端文章标签： Vue 数据渲染

本文链接：https://blog.csdn.net/qq_43661841/article/details/103380742

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

进行了一些简单样式的渲染，主要是想了解前端如何渲染数据

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./observer.js"></script>
</head>
<body>


<!--        1.不能通过索引的方式去修改数组，这样不会渲染 -->
<!--        2.不能通过更改长度的方式去修改数组，这样不会渲染-->
<!--        3.数组变异方法：pop，shift，unshift，splice，sort，reverse，push-->

<!--        更改对象-->
<!--        1.向对象内添加或者删除属性，不会渲染页面-->
<!--        2. vm.$set-->



<!--    key number/string类型-->
    <div id="app">
<!--        <h4 v-for="(value,key,index) in obj">{{  key }}  -&#45;&#45;&#45;&#45;{{ value  }} &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; {{ index }}</h4>-->
<!--        <p v-for="item in 10">{{ item }}</p>-->
<!--        <div v-for="item in 'xiaobaibai'">{{ item  }}</div>-->
<!--        <ul>-->
<!--            <li v-for="fruit in fruitArr" :key="fruit">{{ fruit }}</li>-->
<!--        </ul>-->

<!--        <button @click="handleClick">click</button>-->

<!--        <li>香蕉</li>     香蕉-->
<!--        <li>苹果</li>     苹果-->
<!--        <li>大鸭梨</li>     大鸭梨-->
<!--        <div v-if="show">-->
<!--            name:<input type="text" key="name">-->
<!--        </div>-->
<!--        <div v-else>-->
<!--            password : <input type="text" key="password">-->
<!--        </div>-->
<!--        <button @click="handleClick">click</button>-->
<!--        <ul>-->
<!--            <li v-for="item in arr">{{ item }}</li>-->
<!--        </ul>-->
<!--        {{  obj  }}-->
<!--        <button @click="handleClick">click</button>-->
    </div>

<script>
    const index = 90;
    const fn = (item ,index) => {
        console.log(index);
    }
    fn('a' , 80);

    const vm = new Vue({
        el:'#app',

        data: {
            show: true,
            arr: ['html', 'js','vue'],
            obj:{
                name: 'shanshan',
                age: 18,
                looks: 'beautiful'
            },
            fruitArr: ['香蕉','苹果','大鸭梨'],
            index : 90
        },
        methods: {
            handleClick(){
                // this.fruitArr.reverse();
                // this.show = !this.show;
                // const length = this.arr.length;
                // this.arr[length] = 'react';
                // this.arr.push('react');
                // this.obj.name= 'xiaobai';
                // this.obj.salary=1000000000;
                // delete  this.obj.name;
                this.$set(this.obj,'salary',10000000);

            }
        }
    })
    setTimeout(() =>{
        vm.fruitArr.reverse();
    },2000)
</script>
</body>
</html>

小白白007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Vue

进行了一些简单样式的渲染，主要是想了解前端如何渲染数据<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title>...
复制链接

扫一扫