vue-列表渲染

最新推荐文章于 2023-06-10 23:28:04 发布

@Tiramisu

最新推荐文章于 2023-06-10 23:28:04 发布

阅读量206

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105009806

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

v-for (特殊 v-for=“n in 10”)
a. in
b. of
key：
*跟踪每个节点的身份，从而重用和重新排序现有元素
*理想的 key 值是每项都有的且唯一的 id。data.id

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <style>
        .active {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(data,index) in datalist" key="data">
                {{data}}--{{index}}
            </li>
        </ul>

        <ul>
            <li v-for="(data,index) of datalist">
                {{data}}--{{index}}
            </li>
        </ul>

        <ul>
            <li v-for="(data,key) in obj">
                {{data}}--{{key}}
            </li>
        </ul>
        <ul>
            <li v-for="(data,key) of obj">
                {{data}}--{{key}}
            </li>
        </ul>


        <ul>
            <li v-for="n in 10">
                {{n}}
            </li>
        </ul>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#box",
            data: {
                datalist: ["111", "222", "333"],
                obj: {
                    name: "kerwin",
                    age: 100,
                    location: "dalian"
                }
            }
        })

    </script>
</body>
</html>

数组更新检测
a. 使用以下方法操作数组，可以检测变动 push() pop() shift() unshift() splice() sort() reverse()
b. filter(), concat() 和 slice() ,map(),新数组替换旧数组
c. 不能检测以下变动的数组 vm.items[indexOfItem] = newValue

vm.datalist.push("555")
vm.datalist
vm.datalist.concat(["6666","77777"])
vm.datalist

//通过索引值修改
vm.datalist
(3) ["111", "222", "333", __ob__: Observer]
vm.datalist[0]
"111"
vm.datalist[0]="tiramisu"
"tiramisu"
vm.datalist
(3) ["tiramisu", "222", "333", __ob__: Observer]
//原数组被改变但是视图并不更新

解决
(1)Vue.set(example1.items, indexOfItem, newValue)
(2)splice

//通过Vue.set(example1.items, indexOfItem, newValue) 修改
Vue.set(vm.datalist,0,"tiramisu")
"tiramisu"
//视图改变

//可通过splice方法修改
vm.datalist.splice(0,1,"tramisu")
["111"]
//视图被更新

应用:显示过滤结果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
</head>
<body>
    <div id="box">
        <input type="text" @input="handleInput()" v-model="mytext" />
        <!-- <input type="text" @input="handleInput" /> -->

        <ul>
            <li v-for="data in datalist">
                {{data}}
            </li>
        </ul>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        //["aaa","bbb","ccc","ddd","add","cee","eee"]        
        var vm = new Vue({
            el: "#box",
            data: {
                mytext: '',
                datalist: ["aaa", "bbb", "ccc", "ddd", "add", "cee", "eee"],//过滤会修改数组
                list: ["aaa", "bbb", "ccc", "ddd", "add", "cee", "eee"]  //可另外定义一组用于过滤
            },
            methods: {
                handleInput() {
                    console.log(this.mytext)
                    // console.log("只要value改变，就会触发")
                    //利用输入框的字符， 过滤出包含字段的元素

                    //filter 过滤
                    var newlist = this.list.filter(item => item.indexOf(this.mytext) > -1)

                    // console.log(newlist,this.datalist)
                    this.datalist = newlist;
                    // 计算属性
                }
            }
        })
        var arr = [1, 2, 3, 4, 5]
        var newlist = arr.filter(item => item >= 3)
        console.log(newlist)
    </script>
</body>
</html>

@Tiramisu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-列表渲染

v-for (特殊 v-for=“n in 10”)a. inb. ofkey：*跟踪每个节点的身份，从而重用和重新排序现有元素*理想的 key 值是每项都有的且唯一的 id。data.id<!DOCTYPE html><html><head> <meta charset="utf-8"> <titl...
复制链接

扫一扫