Vue有坑慎入

最新推荐文章于 2025-11-15 03:16:12 发布

原创最新推荐文章于 2025-11-15 03:16:12 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Vue.js中的一些实用技巧，包括如何正确使用v-for循环、v-if条件渲染、模板元素的应用、图片加载的最佳实践及表达式的直接使用等。

vue小总结

正常使用：

<a href="detail.html?id={{ product.id }}" v-for='product in products'>
  <div id='pro-title' v-text='product.title'></div>
  <div v-if="product.status===1">预热中</div>
  <div v-if="product.status===2">众筹中</div>
</a>

//编译的结果：
<a href="detail.html?id=11">
  <div id='pro-title'>标题1</div>
  <div>预热中</div>
</a>
<a href="detail.html?id=12">
  <div id='pro-title'>标题2</div>
  <div>众筹中</div>
</a>

//template和if的区别（一个模块需要循环或者遍历的时候，又不想再外层包一个div）
<template v-if="1===1">
  <div>abc</div>
  <div>dev</div>
</template>
//上面的代码会被编译如下：
<div>abc</div>
<div>dev</div>

使用图片的时候请用以下“：”语法避免vue初始化404：

<img :src="product.imgUrl" class="product-big-img"/>

使用swiper轮播图用一下语法：(:是防止vue初始化404，data-src是swiper做懒加载用的，后面会转化为src）（vue初始化new一定要放在swiper初始化之前）

<img :data-src="banner.bannerPicUrl" class="swiper-lazy"/>
<div class="swiper-lazy-preloader"></div>

vue可以在v-text中直接使用部分函数和部分表达式：

vue可以

<div id="app">
        <div v-text="'&yen;'+message+'元'"></div>
        <div v-text="parseFloat(num).toFixed(2)"></div>
        <div v-text="bool ?'right':'wrong'"></div>
        <div v-text="pic || '/default.png' | addPer host "></div>
    </div>

    <script>
        new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue.js!',
            num:3.1234,
            bool:false,
            pic:'',
            host:'http://www.xyz.com'
          }
        })
    </script>
//运行的结果如下：
¥Hello Vue.js!元
3.00
wrong
http://www.xyz.com/default.png