mvvm - avalon2 vm中属性拼接问题
本文介绍了mvvm - avalon2 vm中属性拼接问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/avalon.js/2.1.5/avalon.js"></script>
</head>
<script>
var vm=avalon.define({
$id:"test",
tree:[
{name:"篮球",calss:1},
{name:"羽毛球",calss:2},
{name:"排球",calss:2},
{name:"水球",calss:2},
],
templ0:"<div>0</div>",
templ1:"<span>1</span>",
templ2:"<p>2</p>",
templ3:"<em>3</em>",
});
</script>
<body ms-controller="test">
<div ms-for="($index,el) in ##tree">
{{el.name}}---class---{{el.calss}}
<div ms-html="##templ+el.calss"></div>
</div>
</body>
</html>```
ms-html中的templ 该如何拼接
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/avalon.js/2.1.5/avalon.js"></script>
</head>
<script>
var vm = avalon.define({
$id: "test",
tree: [
{name: "篮球", calss: 1},
{name: "羽毛球", calss: 2},
{name: "排球", calss: 2},
{name: "水球", calss: 2},
],
template: ["<div>0</div>", "<span>1</span>", "<p>2</p>", "<em>3</em>"]
});
</script>
<body ms-controller="test">
<div ms-for="($index,el) in ##tree">
{{el.name}}---class---{{el.calss}}
<div ms-html="##template[$index]"></div>
</div>
</body>
</html>
这篇关于mvvm - avalon2 vm中属性拼接问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文