响应渲染 在Vue中，被渲染的数据都是响应式的，即Vue实例中进行改变页面中也会跟着改变： <body> <div id="app"> <p>{
响应渲染
<body>
<div id="app">
<p>{{count}}</p>
<button @click="count++">+</button>
<button @click="count--">-</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:"#app",data:{
count:0,},})
</script>
</body>
数组响应
<body>
<div id="app">
<ul>
<li v-for="(value,index) in array" :key="value">{{index + 1}}-{{value}}</li>
</ul>
<button @click.once=func()>改变</button>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",data: {
array: [
"A","B","C","D",]
},methods: {
func() {
this.array[0] = 'a';
},});
</script>
</body>
变异方法
| 方法 |
描述 |
| push() |
追加末尾，将元素压入数组尾部 |
| unshift |
追加头部，将元素压入数组头部 |
| pop() |
弹出末尾，将数组中最后一个元素弹出 |
| shift() |
弹出头部，将数组中第一个元素弹出 |
| splice() |
可以添加、删除、替换数组中的元素 |
| sort() |
排序 |
| reverse() |
翻转 |
服务热线 19970861797
