vue指令、计算属性、过滤器的使用

最新推荐文章于 2024-05-06 18:02:02 发布

小乖你很可爱

最新推荐文章于 2024-05-06 18:02:02 发布

阅读量73

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/2303_78601542/article/details/135069926

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、指令
- 1.v-text与v-html指令
- 2.v-bind与v-model指令
- 3.v-for指令
二、计算属性
三、filters过滤器

前言

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

一、指令

指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

Vue是一个 JavaScript 框架，所以，如果想使用Vue，则在当前页面引入Vue.js文件即可。

<script src="../js/vue.js"></script>

<script src="../js/vue.js"></script>

1.v-text指令与v-html指令

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签。v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。总结起来，v-text更新元素的文本内容，而v-html更新元素的innerHTML。

我们来看一段代码，代码如下：

<div id="app">
     <p v-text="age">ss</p>
     <!-- v-html -->
     <p v-html="age">fvs</p>
 </div>
 <script>
        new Vue({
            el:'#app',
            data:{
                    age:"<h1>18</h1>"
            }
        })
</script>

在这里运行出来的结果是怎样的呢？ v-text它不会解析标签，虽然上面写着html代码，但是它也只当作普通字符来处理，不会解析他的标签，而v-html会将html代码一起输出，因此代码运行出来是这样的：

以上便是v-text与v-html区别。

2.v-bind指令与v-model指令

v-bind指令用于实现单向动态数据绑定。除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

v-bind可以省略v-bind，简写为一个冒号“：” ，如下所示：

<img v-bind:src="img" />

        

        <img :src="img" />

那么单向绑定和双向绑定具体是什么意思呢？接下来我们看一个例子。

首先，我们写三个输入框，其中两个输入框用来表示单向绑定，另外一个输入框用来表示双向绑定，并且给用户名、密码里的输入框赋值。代码如下：

<div id="app">
    <div>
        用户名<input type="text" v-bind:value="username">
    </div>
    <div>
        密码<input type="text" v-bind:value="password">
    </div>
    <input type="text" v-model="name" placeholder=“请输入用户名”>
</div>
<script>
        new Vue({
            el:"#app",
            data(){
                return{
                    username:"admin",
                    password:123456,
                    name:""
                }
            }
        })
</script>

运行效果如下所示：

从中我们可以看到，我们把用户名与密码赋上了确定的值，接下来我们试试修改一下用户名与密码，我们看看效果。

可以很明显的看出，改变左边的用户名与密码之后，右边的username与password并没有改变，那么这个就是单向数据绑定了，一边改变之后，并没有把值传给另外一边。下面我们看看第三个输入框。

我改变了两次数据，第一次是改变输入框的值，第二次是去控制台改变了值，并且两次都传值给了另外一边，这便实现了表单元素和数据的双向绑定。两边无论谁被改变，另外一边也会同步相应的数据。

案例：使用v-bind指令实现菜单的选中效果。（思考：当鼠标选中一个菜单栏目，如何判断出选的是哪一个菜单栏目），需要实现效果如图：

思路：首先，我们需要数据绑定，然后根据选择下标去显示我们所选择的菜单栏目，并且显示出对应的样式。

先去定义一个变量，并且将它设置为0，然后通过点击事件去动态改变currentIndex下标，从而定位到菜单栏目。其中index为实参。

<li :class="[currentIndex==index?'checked':'']" @click="change(index)"

v-for="(item,index) in arr" :key="index">{{item}}</li>

代码如下：

   <style>
        ul li{
            box-shadow: #ccc 0px 0px 8px;
            list-style: none;
            /* 去除列表符号 这里是去除li的符号 */
            width: 70px;
            height: 70px;
            line-height: 70px;
            /* 原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置 */
            border-radius: 50%;
            box-sizing: border-box;
            margin-bottom: 20px;
            /* 距离底部20px */
            cursor: pointer;
            /* 鼠标变成手 */
        }
        .checked{
            color: #fff;
            background-color: #00aeff;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li :class="[currentIndex==index?'checked':'']" @click="change(index)"
             v-for="(item,index) in arr" :key="index">{{item}}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    currentIndex:0,
                    arr:["最新课程","热门推荐","课程分类","热门职业","名师简介"]
                }
            },
            methods:{
                //index  形参
                change(index) {
                    //点击的时候 动态改变currentIndex  0 1 2 3 4
                    this.currentIndex=index;
                }
            }
        })
    </script>

3.v-for指令

我们可以使用v-for指令基于一个数组来渲染一个列表。v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。v-for 指令的值需要使用 item in items 形式的特殊语法，items是源数据的数组，而 item是迭代项的别名。index是迭代到的当前元素索引，从0开始。

v-for="item in items"

v-for="(item,index)in items"

在 v-for块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

        v-for="item in items" 

        v-for="(item,index)in items"

(1)for循环普通数组

代码如下：

<li v-for="(item,index) of fruit" :key="index">
索引值index:{{index}}----每一项item:{{item}}
</li>

<div id="app">
        <ul>
            <li v-for="(item,index) of fruit" :key="index">
            </li>
        </ul>
 </div>
 <script>
        new Vue({
            el:'#app',
            data:{
                    fruit:["西瓜","火龙果","草莓","葡萄"] 
            }
        })
</script>

运行效果如图：

(2)for循环对象数组

代码如下：

<li v-for="(value,key,index) of apple" :key="index">
属性索引:{{index}}----属性名:{{key}}---属性值:{{value}}
</li>

<div id="app">
        <ul>
            <li v-for="(value,key,index) of apple" :key="index">
            </li>
        </ul>
 </div>
 <script>
        new Vue({
            el:'#app',
            data:{
                apple:{
                    name:"苹果",color:"红色"
                }
            }
        })
</script>

运行效果如图：

(3) for循环对象

代码如下：

<div id="app">
        <ul>
            <li v-for="count of 10">
                这是第{{count}}次循环
            </li>
        </ul>
 </div>
 <script>
        new Vue({
            el:'#app',
            data:{
                    //fruit:["西瓜","火龙果","草莓","葡萄"] 
            }
        })
</script>

运行效果如图：

下面我们来看一个案例来更加灵活使用v-for指令。

案例：请使用v-for指令遍历数组["小学","初中","高中","大学"]，并将数据渲染到网页的列表中。执行效果如下：

代码如下：

 <div id="app">
        <ul>
            <!-- item代表数组每一项 -->
            <!-- index代表数组的下标 -->
            <li v-for="(item,index) of study" :key="index" >
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                study:["小学","初中","高中","大学"],
            }
        })
    </script>

其中，<li v-for="(item,index) of study" :key="index" >也可以写成<li v-for="(item,index) in study" :key="index" >，两者都可以进行遍历。

运行效果如图：

二、计算属性computed

计算属性的本质其实就是一个方法，只不过在使用的时候可以直接当做属性来使用。具体有以下特点：

计算属性在使用时不需要加(),直接写名称即可；

如果计算属性用到了data中的数据，当data数据发生变化时，就会立即重新计算这个计算属性的值；

计算属性在第一次使用时的结果会被缓存起来，直到属性中所依赖的data数据发生改变计算属性的结果才会重新求值；

那么计算属性和方法有什么区别呢？

Vue实例中的methods也可以完成计算的功能，与计算属性的作用相同。那么为什么在做计算的时候通常选择计算属性而不选择方法呢？因为计算属性是基于他的依赖缓存的，所以只有当其依赖的数据发生改变的时候，才会重新求值。这就意味着，只要依赖的数据没有发生改变，多次访问计算属性就会立即返回之前的计算结果，不必再次执行函数。而methods不同，他每调用一次就执行一次函数，所以computed 和 methods相比，computed有缓存，性能开销小。

接下来我们来看一个案例：

输入三门科目的分数，显示对应的平均分与总分。

我们先写好他的表格样式

        <table class="gridtable">
            <tr>
                <th>学科</th>
                <th>分数</th>
            </tr>
            <tr>
                <td>语文</td>
                <td><input type="text" placeholder="请输入你的语文成绩" v-model.number="chinese"/></td>
            </tr>
            <tr>
                <td>数学</td>
                <td><input type="text" placeholder="请输入你的数学成绩" v-model.number="math"/></td>
            </tr>
            <tr>
                <td>英语</td>
                <td><input type="text" placeholder="请输入你的英语成绩" v-model.number="english"/></td>
            </tr>
            <tr>
                <td>总分</td>
                <td><input type="text" v-bind:value="totalScore"/></td>
            </tr>
            <tr>
                <td>平均分</td>
                <td><input type="text" v-bind:value="avgScore"/></td>
            </tr>
        </table>

当一个结果受多个值影响时候就需要用到computed，最典型的例子：购物车商品结算的时候。我们需要利用computed来定义总分与平均分。

    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    chinese:"",
                    math:"",
                    english:""
                }
            },
            methods:{

            },
            computed:{
                totalScore(){
                    var sum=this.chinese+this.math+this.english;
                    return sum;
                },
                avgScore(){
                    var avg=(this.chinese+this.math+this.english)/3;
                    return this.totalScore/3
                    
                }
            }
        })
    </script>

其中totalScore用来定义总分，avgScore用来定义平均分。

三、filters过滤器

在Vue.js中提供了一种过滤器，它可以对数据进行过滤处理，它的作用一般是用于一些常见的文本格式化，即修饰文本，并根据过滤的条件返回需要的结果，过滤器通常由管道符"|"进行标识。过滤器一般可以用在两个地方：双花括号{{}}或v-bind表达式中。它分为全局过滤器和局部过滤器。当全局过滤器和局部过滤器重名时，会采用局部过滤器。过滤器函数必须接收表达式的值 (之前的操作链的结果) 作为第一个参数。

过滤器在模板语法{{}} 或v-bind 中使用，并且过滤器，computed 必须要有返回值。接下来我们来看一个非常简单的案例以便于大家理解。

我们需要实现以上效果，在‘200’前面加上符号‘￥’。

    <div id="app">
        {{money|addIcon}}
    </div>
    <script>
        var wm=new Vue({
            el:"#app",
            data(){
                return{
                    money:200
                }
            },
            methods:{

            },
            filters:{
                addIcon(val){
                    return "￥"+val
                }
            }
        })