Javascript 需要帮助在Vue.js框架中设置变量吗

我有一个使用react.js框架的javascript网站，我最近刚开始用vue.js重建我的网站。我试图添加一些变量，但我在这样做时遇到了一些麻烦，研究并没有像我希望的那样有帮助

这就是我想在vue.js中重新创建的react.js中的内容

var dataset5=52;

<div className="bar"style={{width:dataset5+"%",backgroundColor:colorset5}}></div>

PulseOverview.Vue：

<div class="section sec2">  
  <div id="app">
     <p>{{ball}}</p>
  </div>
</div>

{{ball}}

两天后我自己解决了，谢谢大家

<template>
  ...
    <h2>{{bar1name}}</h2>
    <h3>{{bar2name}}</h3>
  ...
</template>

<script>    
export default {
  props: {
    bar1name:{        
      type: Object, 
      default: function(){
        return('Listening')
      }
    },
    bar2name:{
      type: Object, 
      default: function(){
        return('Problem Solving')
      }
    },
  }
}
</script>

...
{{bar1name}}
{{bar2name}}
...
导出默认值{
道具：{
bar1name:{
类型：对象，
默认值：函数（）{
返回（'正在侦听'）
}
},
BAR2名称：{
类型：对象，
默认值：函数（）{
返回（'问题解决'）
}
},
}
}

您是否阅读了Vue文档？你可以在这里找到你的答案：我在发送之前已经看过了，我试着按照文档中显示的方式来做，但就是无法让它工作。我希望在这里用我的代码做个例子，然后发布你实际尝试过的东西。发布您在React中所做的没有帮助，因为我们需要查看不工作的Vue代码，以便帮助您使Vue代码工作。从表面上看，你的问题是“请将我的反应代码转换为Vue代码”，这是一个离题的问题，因为它归结为一个代码请求。@zero2987我做了一个编辑，认为它不够好，无法放入请求，实际上要删除，但这是我得到的最接近的东西

<template>
  ...
    <h2>{{bar1name}}</h2>
    <h3>{{bar2name}}</h3>
  ...
</template>

<script>    
export default {
  props: {
    bar1name:{        
      type: Object, 
      default: function(){
        return('Listening')
      }
    },
    bar2name:{
      type: Object, 
      default: function(){
        return('Problem Solving')
      }
    },
  }
}
</script>