在使用props进行计算时一定要注意，运算的数字还是字符串或其他特殊性字符，在这里我们演示一下，运算时数字和字符串的情况。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="vue.js"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app1">
<div>
<child my-message="1"></child> <!--字符串运算-->
</div>
<div>
<child :my-message="1"></child> <!--数值运算-->
</div>
</div>
<script>
Vue.config.debug = true;
Vue.component('child',{
props: ['myMessage'], <!--定义props-->
template: '<span>{{ myMessage + 1}}</span><div>{{ myMessage + "a"}}</div><div>{{ myMessage + 1.23}}</div>'
}); <!--模板的拼接-->
var vm = new Vue({
el: '#app1'
});
</script>
</body>
</html>结果：
11
1a
11.23
2
1a
2.23结论：
如果是数字运算则要在子组件标签元素前面加上冒号。字符串可以直接进行运算，如果 是数字与数字运算，则结果是数字。字符串与数字运算，最终都会转化成字符串的拼接。
扫一扫
1795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
