Vue基础语法之v-for
2019-05-12 本文已影响0人
最底层的技术渣
一、js文件
var app = new Vue({
el:'#app',
data:{
food:[
{
name:"姜",
price:10,
discount:0.5
},
{
name:"蒜",
price:8,
discount:0.9
},
{
name:"白菜",
price:2,
//discount:0.6
}
//"A","B"
]
}
});
二、html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <div>
<input type="text" v-model="name">
<span v-if="name">My name is：{{ name }}</span>
</div>-->
<div>
<!--<input type="text" v-model="name">-->
<li v-for="f in food">{{ f.name }},¥{{ f.discount ? f.price * f.discount : f.price}}</li>
<!--<li v-for="item in food">{{ item }}</li>-->
</div>
</div>
</body>
<script src="lib/js/vue.js"></script>
<script src="asset/js/main.js"></script>
</html>
三、效果展示
四、代码对比
五、注意事项：
{{}} 只支持一部分的js语句，并不支持全部的js语句!
支持的（比如）
{{ 1+1 }} ,{{ typeof 1}}
不支持的（比如）
{{ if(true) return "true"}}
