继续来体验一波数据驱动结合绑定方法的实践案例. 这里以最常见的反转字符串为栗子来体验面向数据编程.
v-on
用来绑定事件的, 然后将方法名写在 methods 中即可.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
content: "hello, world!"
}
},
// 处理数据的方案都放 methods 中
methods: {
btnClick () {
// 反转字符串
this.content = this.content.split('').reverse().join('')
}
},
template: `
<div>
{{content}}
<button @click="btnClick">反转</button>
</div>
`
}).mount('#root')
</script>
</body>
</html>
v-if
条件成立则Dom生效, 不会保留位置哦.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return { show: true }
},
methods: {
btnClick () {
this.show = !this.show
}
},
template: `
<div>
<span v-if="show">hello, world</span>
<button @click="btnClick">显示/隐藏</button>
</div>
`
}).mount('#root')
</script>
</body>
</html>
简单的指令和方法体验就到这里啦, 确实还是很好理解的.
标签：methods,show,反转,vue3,content,初识,指令,体验 From： https://www.cnblogs.com/chenjieyouge/p/16614456.html