Vue基础②

动态绑定 v-bind

在很多情况下,我们需要动态修改标签的属性,如 img 标签的 alt 属性,往往将属性值固定是不行的,此时我们就需要 v-bind 来动态绑定。

<template>
  <div id="app">
    <img src="#" v-bind:alt="imgText" />
  </div>
</template>
<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            imgText:'周杰伦演唱会图片'
        };
    }
};
</script>

这里可以看出,我们给 img标签的 alt属性动态绑定了 imgText变量以此实现动态变化。

当然也可以写成



<div id="app">
    <img src="#" :alt="imgText" />
  </div>

其中 :alt 是 v-bind:alt 的简写,即 v-bind: 的简写为 :

模板中的运算符

差值表达式不仅可以表示一个变量,也可以进行简单运算。

<ul>
      <li>{{ goods[0].index + 1 }}---{{ goods[0].name }}</li>
      <li>{{ goods[1].index + 1 }}---{{ goods[1].name }}</li>
      <li>{{ goods[2].index + 1 }}---{{ goods[2].name }}</li>
</ul>
 data() {
        return {
            goods:[
                {
                    index:0,
                    name:"扫地机器人"
                },
                {
                    index:1,
                    name:"华为手机"
                },
                {
                    index:2,
                    name:"戴尔笔记本"
                }
            ]
        };
    }

除了简单的加减乘除,差值表达式也支持三元运算符:

<div id="app">
    <p>{{ flag?'你已经通过了考试:'你还没有通过考试' }}</p>
</div>
data() {
        return {
            flag:true
        };
    }

这里在 p 标签上添加了三元运算符,并与之后的变量连接。

除了运算符,模板中也可以写入js内置方法

<div id="app">
    <p>{{ message.split('').reverse().join('') }}</p>
</div>

这个方法即将message变量内容颠倒显示

注意:不要在模板中滥用表达式,尤其是js内置方法,不然会显得html代码十分臃肿

v-if,v-else,v-else-if

<p v-if="isShow">{{ message }}</p>

这表示只有当isShow为true时,这个标签才会显示。

而v-else与v-else-if 与js中的用途一样,为了规范 if 的范围。

当然这里要注意和js一样这里使用等于判断时,需要使用三个‘=’如:

<p v-if="questions[0].type==='PICK'">{{ questions[0].content }}</p>

v-show

v-show的用法和v-if是一样的,即当条件满足,就会显示标签中的内容,区别就是

  • v-show指令只是将标签的display属性设置为none
  • v-if指令,如果不满足条件,则此标签在dom中根本不存在。

那么如何选择呢?
当标签出现以后就不会再次消失,或者消失/出现的频率不高,就用 v-if。 当标签会被频繁的切换,从消失到显示,那么就用v-show。
不过开发中大多数情况下都会用v-if。只不过有些人比较严谨,会考虑切换开销和渲染开销。

列表渲染(v-for)

v-for和 js 中的for循环差不多。

<div id="app">
    <ul>
        <li v-for="item in 5" :key="item">{{ item }}</li>
    </ul>
</div>

即从1开始循环遍历到5,最终得到5个 li标签

循环渲染数组

<ul>
    <li v-for="(item,index) in nameList" :key="index">{{ item }}</li>
</ul>
<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            nameList:["张淮森","周逸依","梁澄静","宁古薄","丘约靖"]
        };
    }
};
</script>

其中{item,index} 第一个为对象,第二个为位置。

需要注意的是,循环渲染数组包含三个值

<!-- 
    value:对象中每一项的值
    key:对象中每一项的键
    index:索引
 -->
<li v-for="(value,key,index)" :key="index"></li>
 data() {
        return {
            book:{
                bookName:'指环王',
                author:'JK 罗琳'
            }
        };
    }

对于以上数组,value代表如“指环王”的值,key代表如“bookName”,index表示位置、

循环渲染数组也可以渲染对象数组。

可以看见,循环渲染时,我们会加上 :key=””

这是Vue工程为了保证每一个item的唯一性,需要一个唯一的key,否则会报错。