Vue.js 学习笔记（三）

最新推荐文章于 2023-12-26 20:00:20 发布

lxr_wxp

最新推荐文章于 2023-12-26 20:00:20 发布

阅读量159

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44593006/article/details/96454787

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一，条件渲染
顾名思义，就是根据条件决定是否在浏览器中渲染当前element
有两个属性： v-show ， v-if（v-else和v-if组合使用）
判断条件是vue中的变量的值，下面是个例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue test</title>
        <script src="./js/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="div">
            <p v-show="isshow">{{first}}</p> // 根据isshow的值进行渲染
            <p v-if="isshow">{{next}}</p> // 根据isshow的值进行渲染
            <p v-else>{{last}}</p> // 和其他语言中的语法一样，前面的if为false进入else，如果不进行判断可以省略v-else的值
            <button @click="test">test</button> //出发methods中的方法
        </div>
        <script src="./js/vue.js" type="text/javascript"></script>
        <script type="text/javascript">
        const vue = new Vue({
            el : '#div',
            data : {
                isshow : true,
                first : 'first',
                next : 'next',
                last : 'last '
            },
            methods : {
              test(){
                  console.log("click once");
                  this.isshow = !this.isshow;
              }
            }
        });
        </script>
    </body>
</html>

结果如下:
在这里插入图片描述
页面初始化的时候，只渲染了first和next，点击按钮之后就只显示了last

在这里插入图片描述
这里说一说 v-show和v-if的区别
v-show 为false时，就相当于设置style中的display属性为none
v-if 为false时，则是会把条件块内的事件监听器和子组件适当地被销毁
二、列表渲染
将数组显示为列表，用到列表渲染，说着好听，其实就是一个for循环真的很简答
下面是代码和解释：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue test</title>
        <script src="./js/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="div"> // 将vue对象中的person数组展示位一个列表
            <ul> // 很简单的循环语法，person是当前被遍历的对象，index是当前被遍历对象的下标
                <li v-for="(person , index ) in persons" :key="index">{{person['name']}}-----{{person['age']}}</li>
            </ul>// key是一个唯一标识 ， 用于更高效的更新虚拟DOM
        </div>
        <script src="./js/vue.js" type="text/javascript"></script>
        <script type="text/javascript">
        const vue = new Vue({
            el : '#div',
            data : {
                persons : [
                    {name : 'messi' , age : 32},
                    {name : 'james' , age : 33},
                    {name : 'jack' , age : 66},
                    {name : 'rose' , age : 55},
                ]
            }
        });
        </script>
    </body>
</html>

执行结果
在这里插入图片描述
二、根据关键字进行列表的查询
代码及分析如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue test</title>
        <script src="./js/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="div">
            <input type="text" v-model="search"/><br>  //输入关键字
            <ul> //遍历filter_persons数组
                <li v-for="(person , index ) in filter_persons" :key="index">{{person['name']}}-----{{person['age']}}</li>
            </ul>
        </div>
        <script src="./js/vue.js" type="text/javascript"></script>
        <script type="text/javascript">
        const vue = new Vue({
            el : '#div',
            data : {
                persons : [   //列表
                    {name : 'messi' , age : 32},
                    {name : 'james' , age : 33},
                    {name : 'jack' , age : 66},
                    {name : 'rose' , age : 55},
                ],
                search : '', //关键字
            },
            computed : {  // 由于filter_persons数组是由persons数组和search计算而来的，故采用计算属性
                filter_persons(){
                    const {search , persons} = this //定义+赋值
                    return persons.filter( p => p['name'].indexOf(search)>=0); //filter函数的使用
                }
            }
        });
        </script>
    </body>
</html>

在这里插入图片描述
三、完成对列表的排序
对列表按年龄的大小进行排序，也包括过滤
代码分析如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue test</title>
        <script src="./js/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="div">
            <input type="text" v-model="search"/><br>
            <ul>//跟上面一毛一样
                <li v-for="(person , index ) in filter_persons" :key="index">{{person['name']}}-----{{person['age']}}</li>
            </ul>
            <button @click="search_method = 0">原本顺序</button> // 改版search_method的值来改变计算方式
            <button @click="search_method = 1">升序</button>
            <button @click="search_method = 2">降序</button>
        </div>
        <script src="./js/vue.js" type="text/javascript"></script>
        <script type="text/javascript">
        const vue = new Vue({
            el : '#div',
            data : {
                persons : [
                    {name : 'messi' , age : 32},
                    {name : 'james' , age : 33},
                    {name : 'jack' , age : 66},
                    {name : 'rose' , age : 55},
                ],
                search : '',
                search_method : 0 //0代表原本顺序，1代表升序，2代表降序
            },
            computed : {
                filter_persons(){ //计算filter_persons的结果
                    const {search , persons , search_method} = this //声明赋值
                    const filter_persons =  persons.filter( p => p['name'].indexOf(search)>=0); // 过滤
                    if(search_method !== 0)   // 不是原本排序
                    filter_persons.sort((a,b) => { //sort函数的使用
                        if(search_method === 1)
                            return a['age'] - b['age']; //a>b返回正值，a<b返回负值 ， 升序
                        else
                            return b['age'] - a['age'];  //a<b返回正值，a>b返回负值  ， 降序
                    });
                    return filter_persons;
                }
            }
        });
        </script>
    </body>
</html>

原本顺序
在这里插入图片描述
降序

升序

过滤+降序

lxr_wxp

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 学习笔记（三）

一，条件渲染顾名思义，就是根据条件决定是否在浏览器中渲染当前element有两个属性： v-show ， v-if（v-else和v-if组合使用）判断条件是vue中的变量的值，下面是个例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> &lt...
复制链接

扫一扫