<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="arr in arrNum">
{{ arr }}
</li>
</ul>
</div>
<!-- 构造器外部的方法 -->
<button onclick="add()">Add</button>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 外部声明数据
var outData = {
arrNum: [11, 22, 33]
};
var vm = new Vue({
el: '#app',
// 内部引用数据
data: outData
});
function add() {
console.log('我被执行了');
// 利用索引直接设置一个项或者修改数组的长度时,vue不会自动更新
// 第1种调用方式,直接操作外部数据:
// outData.arrNum[1] = 55;
// 第2种调用方式,用Vue对象的方法添加:
// vm.arrNum[1] = 55;
// Vue.set可以更新
Vue.set(vm.arrNum, 1, 55);
}
</script>
</body>
</html>