以下代码是否正确 <div id="app"> <ul> <li v-for="item in items" v-bind:src="item.image" v-if="item.price > 50"> {{item.productld}} {{ item.name }} {{item.image}} {{ item.price }} 元 </li> </ul> </div> <script> new Vue({ el: '#app', data: { items: [ {productld:1, name: '马克杯A', image:'新建文件夹\images\pic1.png',price: 25 }, {productld:2, name: '马克杯B', price: 60 }, {productld:3, name: '马克杯C', price: 80 }, {productld:4, name: '马克杯D', price: 45 }, ] } }) </script>
时间: 2023-05-19 22:03:49 浏览: 81
在vue中使用v-bind:class的选项卡方法
这段代码存在问题,因为在li标签中使用了v-bind指令绑定了src属性,但是li标签本身并不支持src属性。应该将v-bind指令绑定到img标签上。另外,v-for指令需要绑定一个items数组,但是在代码中没有定义该数组。正确的代码应该是:
<div id="app">
<ul>
<li v-for="item in items" v-if="item.price > 50">
{{item.productld}}
{{ item.name }}
<img v-bind:src="item.image">
{{ item.price }} 元
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{ productld: 1, name: '商品1', image: 'image1.jpg', price: 60 },
{ productld: 2, name: '商品2', image: 'image2.jpg', price: 40 },
{ productld: 3, name: '商品3', image: 'image3.jpg', price: 70 }
]
}
});
</script>
阅读全文