今天工作遇到一个需求:
需要打印单个产品的条码及名称，打印份数可手动设定。最近在学习 Vue.js，所以就想着用 Vue.js 和 jQuery 分别实现下，加深自己对 Vue.js 的理解，了解 Vue.js 与 jQuery 有哪些不同。
Vue.js 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
数量：<input type="text" v-model="str">
<div class="info" v-for="n in num">
<div class="code">{{ item.code }}</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
str: '1',
item: {code: '001', name: '营养快线'}
},
computed: {
num: function () {
return parseInt(this.str)
}
}
});
</script>
<style>
.info {
border: 1px solid red;
margin-top: 10px;
}
</style>
</body>
</html>
这里遇到一个问题：如果不使用 computed，而是在 data 里直接定义 num，虽然页面刚刚加载时显示是正确的，但是当我修改文本框中的数值时，比如文本框的内容由 1 改为 12 时，显示的产品编码及名称的数量不是 12个 而是 2 个；文本框的内容由 1 改为 123 时，显示的产品编码及名称的数量不是 123个 而是 3 个。我在控制台看了，当我修改文本框内数值时， console.log(typeof app.num)的结果成了 string。不知道为什么。
jQuery 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
数量：<input type="text" id="num" value="1">
<div id="app">
<div class="info">
<div class="code">001</div>
<div class="name">营养快线</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
var html = $('#app').html();
$('#num').on('keyup', function() {
var num = parseInt($(this).val());
var result = '';
for (var i = 0; i < num; i++) {
result += html;
}
$('#app').html(result);
});
});
</script>
<style>
.info {
border: 1px solid red;
margin-top: 10px;
}
</style>
</body>
</html>
效果图
数量为1时：
1.png
数量为2时：
2.png
网友评论