Vue vuecli4.x使用声明式渲染、条件与循环、事件绑定、双向绑定基础用法
程序员文章站
2022-03-22 10:02:37
声明式渲染
{{message}}
条件与循环v-if 声明式渲染
<template>
<div>{{message}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "Hello Vue!"
};
}
};
</script>
条件与循环
v-if
<template>
<div v-if="seen">{{message}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "Hello Vue!",
seen:true
};
}
};
</script>
v-for
<template>
<div>
<ul>
<li v-for="item in todos" :key="item.text">{{ item.text }}</li>
</ul>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
todos: [
{ text: "学习 JavaScript" },
{ text: "学习 Vue" },
{ text: "整个牛项目" }
]
};
}
};
</script>
事件绑定
v-on:click或@click
<template>
<div>{{message}}</div>
<button v-on:click="reverseMessage">反转消息</button>
// <button @click="reverseMessage">反转消息</button>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "Hello Vue!"
};
},
methods: {
reverseMessage: function() {
this.message = this.message
.split("")
.reverse()
.join("");
}
}
};
</script>
双向绑定
v-model
<template>
<input v-model="message" />
</template>
<script>
export default {
name: "App",
data() {
return {
message: ""
};
}
};
</script>
本文地址：https://blog.csdn.net/Z_Y_F520/article/details/107514953
下一篇： 批处理文件简介与编写第1/2页