Vue3.0列表渲染,setup中渲染
阿新 • • 發佈:2021-01-03
技術標籤:vuejavascriptvue.jshtml5htmlcss3
HTML
<div>
<p>{{ ArrData.arr1 }}</p>
<p>{{ ArrData.arr2 }}</p>
<p>{{ ArrData.arr3 }}</p>
<p>{{ ArrData.arr4 }}</p>
<button @click="hanData">點選切換</button>
</div>
script
import {reactive, onMounted} from 'vue'
export default {
name: 'App',
setup() {
console.log("setup")
let ArrData = reactive({
arr1: "12",
arr2: "12345",
arr3: "14352",
arr4: "13452"
})
function hanData () {
ArrData.arr1 = '1******',
ArrData.arr2 = '2******',
ArrData.arr3 = '3******',
ArrData.arr4 = '4******'
}
console.log(ArrData)
onMounted(() => {
})
return {
ArrData, hanData
}
},
data() {
return {}
},
beforeCreate( ) {
console.log("beforeCreate")
},
methods: {},
beforeUnmount() {
},
unmounted() {
},
}