如何使用 vue.js 有条件地渲染块？

Question

var app = new Vue({
  el: '#app',
  data: {
     products:[
       {
        product_id:'21221312',
        product:[
          {variation:'paper', price:'12'}
         ]
        },
        {
        product_id:'2122131212',
        product:[
          {variation:'ebook', price:'122'}
         ]
        },
         {
        product_id:'21221312212',
        product:[
          {variation:'aduio', price:'1322'}
         ]
        }, 
     ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
  <div v-for="(product, index) in products">
    <div v-for="variant in product.product">
      <p v-if="variant.variation === 'paper'">
        {{variant.price}}
      </p>
       <p v-if="variant.variation==='ebook'">
        {{variant.price}}
      </p>
        <p v-if="variant.variation==='aduio'">
        {{variant.price}}
      </p>
    </div>
  </div>
<div>

我刚刚开始学习 Vue.js，我有这个问题，我如何有条件地呈现变化价格，例如，如果变化包含 paper，我只想呈现纸张而不是 ebook and audio，这是可以使用 v-if 语句吗？

 products:[
      {
    product_id:'21221312'
    variations: [
      {
        variation:'paper',
        price:'44'
      },
      {
        variation:'ebook',
        price:'41'
      },
      {
        variation:'audio',
        price:'40'
      }
    ],

    },
    
    {
    product_id:'212213132'
    variations: [
      {
        variation:'paper',
        price:'44'
      },
      {
        variation:'ebook',
        price:'41'
      },
      {
        variation:'audio',
        price:'40'
      }
    ],
   },   
 ]