十分钟带你学会 Vue Template

最新推荐文章于 2024-09-22 01:59:41 发布

Gao_雪

最新推荐文章于 2024-09-22 01:59:41 发布

阅读量1.4k

点赞数 39

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/oageux/article/details/140840873

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML 属性渲染语法

HTML 标签上都有自己的属性，比如说 a 标签上有target、href、title属性。这些属性的值都是被写死的。

如何让这些属性的值根据data中定义的变量的值的变化而变化呢？就要用到属性绑定。

动态绑定–v-bind

我们在学习 img 标签的时候，一定学过一个属性 alt，就是当图片加载不出来的时候，有一个默认的文字去说明一下这张图是什么内容，代码如下：

<img src="#" alt="吴尊" />

但是这样只能在静态网页中实现，真正的网站，加载这些说明文字的时候，都是动态加载，所以 alt 后面不能将数据写死。

所以这时候就要使用动态绑定，代码如下：

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

动态渲染图片

我们来做一个类似微博案例的小案例，效果如下：

<template>
  <div id="app">
    <div class="album">
      <img :src="imgList[0]" />
      <img :src="imgList[1]" />
      <img :src="imgList[2]" />
      <img :src="imgList[3]" />
    </div>
  </div>
</template>

```js
<script>
  export default {
      name: "app",
      data() {
          return {
              imgList:[
                  'http://pic2.zhimg.com/50/v2-4a06728efc99ba874a5d7422fd55aaed_hd.jpg',
                  'http://img2.imgtn.bdimg.com/it/u=372764256,3394765004&fm=26&gp=0.jpg',
                  'http://img1.imgtn.bdimg.com/it/u=1898582417,1582081952&fm=26&gp=0.jpg',
                  'http://b-ssl.duitang.com/uploads/item/201707/10/20170710141316_vVFNh.thumb.700_0.jpeg'
              ]
          };
      };
  }
</script>

可以看到，我们在案例中并没有使用 v-bind:src 而是:src

这里我们用的是 v-bind 的简写模式，即冒号（:），但是一定要注意，必须是英文模式的冒号。

关于属性渲染，我们就讲到这里，其它的属性动态绑定的方法和 src 的是一样的，只需要在属性前面添加一个 v-bind 或者冒号(:)即可。

模板中使用表达式

我们之前学习过 Vue 中的差值表达式，代码如下：

<template>
  <div id="app">
    <p>{{ text }}</p>
  </div>
</template>

模版中进行计算

其实差值表达式中不仅可以写一个变量，还可以进行简单的计算，比如我们要在渲染商品的时候，还要在前面添加一个序号，但是获取的数据中，序号是从 0 开始的，我们需要加 1.

代码如下：

<template>
  <div id="app">
    <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>
  </div>
</template>
<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            goods:[
                {
                    index:0,
                    name:"扫地机器人"
                },
                {
                    index:1,
                    name:"华为手机"
                },
                {
                    index:2,
                    name:"戴尔笔记本"
                }
            ]
        };
    }
};
</script>

模版中使用三元表达式

我们可以使用三元表达式来决定

<template>
  <div id="app">
    <p>{{ flag?'你已经通过了考试':'你还没有通过考试' }}</p>
    <button @click="exchange">转换</button>
  </div>
</template>
<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            flag:true
        };
    },
    methods:{
        exchange(){
            this.flag = !this.flag;
        }
    }
};
</script>

点击转换按钮切换 flag 的值，对应的，p 标签中的内容会根据 flag 的值显示不同的内容。

在模版中写方法

我们在模版中还可以使用 js 内置方法，比如下面这个案例中，就可以在模版中写方法，这样就可以少写一个方法。

<template>
  <div id="app">
    <p>{{ message.split('').reverse().join('') }}</p>
  </div>
</template>
<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            message:"message"
        };
    }
};
</script>

**注意：**不要在模版中滥用表达式，尤其是 js 的内置方法。否则会使 html 代码变得臃肿。

条件渲染语句

条件渲染语句，就是可以根据不同的条件来选择渲染不同的模块，你可以将它跟js中的if、if/else、if/else-if结合起来理解。

v-if

当条件满足的时候，会显示标签内的内容。比如下面这个案例：

<p v-if="isShow()">{{ message }}</p>
<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            message:"当条件满足的时候，显示这里的内容"
        };
    },
    methods:{
        isShow(){
            if(!this.message) 
                return false;
            return true;
        }
    }
};
</script>

v-else

与js的条件判断语句相应的，学了if，接下来就是else，其意义和js中的else一样，即不符合if的时候，就显示else中的内容。

代码如下：

<p v-if="isShow()">{{ message }}</p>
<p v-else>{{ defaultMessage }}</p>
<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            message:"当条件满足的时候，显示这里的内容",
            defaultMessage:"defaultMessage"
        };
    },
    methods:{
        isShow(){
            if(!this.message) 
                return false;
            return true;
        }
    }
};
</script>

v-else-if

v-else-if是v-if的一个补充，当条件不止一个的时候，就可以用到v-else-if。

比如下面这个案例，仅靠v-if是不够的：

<p v-if="questions[0].type === 'PICK'">{{ questions[0].content }}</p>
<p v-else-if="questions[1].type === 'MULT'">{{ questions[1].content }}</p>
<p v-else>题目还没有加载进来...</p>
<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            questions:[
                {
                    type:"PICK",
                    content:"这是一道选择题"
                },
                {
                    type:"MULT",
                    content:"这是一道多选题"
                },
                {
                    type:"ESSAY",
                    content:"这是一道论述题"
                }
            ]
        };
    }
};
</script>

因为我们还没有学习循环语句，所以可以通过更改html代码的条件来看显示的结果：

<p v-if="questions[0].type === 'PICK'">{{ questions[0].content }}</p>
<!-- 改为下面的代码，就会发现显示的是--这是一道多选题 -->
<p v-if="questions[1].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。只不过有些人比较严谨，会考虑切换开销和渲染开销。

列表渲染语句

终于，我们要学习列表渲染了，有了这个东西，我们可以少写很多代码。

循环渲染数字

列表渲染的核心就是Vue的循环指令–v-for

v-for和js中的for循环的原理相似。下面我们通过最简单的循环渲染数字来初步了解一下v-for。代码如下：

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

循环渲染数字的时候，不需要写js代码，Vue的内核会从1开始循环遍历数字，直到5结束。最终得到5个li标签，标签内的item就是每次循环出来的数字。

循环渲染数组

与js遍历数组一样，Vue中的v-for指令也可以遍历数组对象。代码如下：

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

这样我们就得到了一个姓名列表，但是如果我们希望在名字前面添加一个序号，这时候就要用到v-for中的index，在上面代码的基础上添加一点东西即可：

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

这时候你会发现序号是从0开始的，那么我们就可以利用之前学习的在模版中使用表达式来给index加1，修改后的代码如下：

<ul>
    <li v-for="(item,index) in nameList" :key="index">{{ index + 1 }}---{{ item }}</li>
</ul>

循环渲染对象

循环渲染对象，会从对象里面循环取出里面的值。

这里要讲一下v-for循环遍历对象时候，括号内的三个参数：

<!-- 
    value：对象中每一项的值
    key：对象中每一项的键
    index：索引
 -->
<li v-for="(value,key,index)" :key="index"></li>

接下来我们遍历一个对象来看看这三个参数分别对应的是什么？

<ul>
    <li v-for="(value,key,index) in book" :key="index">值：{{ value }}--键：{{ key }}--索引：{{ index }}</li>
</ul>
<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            book:{
                bookName:'指环王',
                author:'JK 罗琳'
            }
        };
    }
};
</script>

观察结果你会很明确的直到，这三个参数分别代表对象中的那些字段。

不过我们大多数情况下只会用到value。

遍历数组中的对象

绝大多数情况下，我们遍历的都是数组中的对象。

<ul>
    <li v-for="(item,index) in books" :key="index">
        {{ index+1 }}----{{ item.title }}----{{ item.author }}----{{ item.publishedTime }}
    </li>
</ul>
<script>
export default {
    name: "app",
    // 数据
    data() {
        return {
            books: [
                {
                    title: '《魔戒》',
                    author: '约翰·罗纳德·瑞尔·托尔金',
                    publishedTime: '1954'
                },{
                    title:'《哈利·波特》',
                    author:'J·K·罗琳',
                    publishedTime:'1997'
                },{
                    title:'《人性的弱点》',
                    author:'戴尔•卡内基',
                    publishedTime:'2008'
                }
            ]
        };
    }
};
</script>

:key

在Vue CLI工程中为了保证每一个item都是唯一的，所以需要一个唯一的key，否则你的项目会报错。

key的添加位置：

<li v-for="(item,index) in books" :key="">

key的值一般都是从后台取到的数据的id，主要是为了保证每一个节点都有唯一key值。我们在学习的时候，可以使用索引。代码如下：

<li v-for="(item,index) in books" :key="index">

到这里，Vue中的列表渲染就已经讲完了～