我是一名高级程序员,有一些 Java 经验。现在我正在尝试使用Vue.js框架学习JS。我得到了这些重复代码,我想用 Vue 组件替换它们,每个实例都有不同的数据。 该代码代表移动电话的五个不同的 div。我需要创建一个手机组件并为每部手机传递一些参数。您能举例说明如何做到这一点吗?了解 Vue.js 中组件的概念确实很有帮助。 提前致谢。
代码:
<div class="phone">
<img src="https://www.technobuffalo.com/wp-content/uploads/2017/02/iphone-8-concept-8-3-470x310@2x.jpg">
<section>
<h2>iPhone Z</h2>
<ul>
<li>Semitransparent telefon</li>
<li>5G ready</li>
<li>Handhållare</li>
</ul>
</section>
<input type="radio" name="phone" value="200">
</div>
<div class="phone">
<img src="https://images.techhive.com/images/idge/imported/imageapi/2015/01/14/17/011011-iphoney5-2-100546391-gallery.idge.jpg">
<section>
<h2>iPhone G</h2>
<ul>
<li>Armbandstelefon</li>
<li>Projicerad skärm</li>
<li>Virtual touch</li>
</ul>
</section>
<input type="radio" name="phone" value="250">
</div>
<div class="phone">
<img src="http://www.newsmobile.in/wp-content/uploads/2017/06/iPhone1.jpg">
<section>
<h2>iPhone Mini</h2>
<ul>
<li>Retrodesign</li>
<li>Face recognition</li>
<li>Handhållare</li>
</ul>
</section>
<input type="radio" name="phone" value="110">
</div>
<div class="phone">
<img src="http://cdn.images.express.co.uk/img/dynamic/59/590x/secondary/update-samsung-gear-s3-android-wear-google-801981.jpg">
<section>
<h2>Samsung Wear</h2>
<ul>
<li>Look cool</li>
<li>Feel hot</li>
<li>Arm-processor</li>
</ul>
</section>
<input type="radio" name="phone" value="200">
</div>
<div class="phone">
<img src="http://thefoxisblack.com/blogimages//samsung-display-centric-world.jpg">
<section>
<h2>iDrink Nokia</h2>
<ul>
<li>Smakinterface</li>
<li>Tungstyrd</li>
<li>No more cool-aid</li>
</ul>
</section>
<input type="radio" name="phone" value="100">
</div>
</div>
</div>
最佳答案
<div class="phone">
<img src="https://www.technobuffalo.com/wp-content/uploads/2017/02/iphone-8-concept-8-3-470x310@2x.jpg">
<section>
<h2>iPhone Z</h2>
<ul>
<li>Semitransparent telefon</li>
<li>5G ready</li>
<li>Handhållare</li>
</ul>
</section>
<input type="radio" name="phone" value="200">
</div>
会变成:
<div class="phone">
<img :src="imageSource">
<section>
<h2>{{phoneName}}</h2>
<ul>
<li v-for="line in description">{{line}}</li>
</ul>
</section>
<input type="radio" name="phone" :value="phoneValue">
</div>
然后在您的父组件中,您将像这样传递这些 Prop :
<phone-template
v-for="phone in phoneList"
:imageSource="phone.src"
:phoneName="phone.name"
:description="phone.description"
:phoneValue="phone.value"
/>
关于javascript - Vue.js 中的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49875316/