vue的内置指令练习和 vue的事件练习

最新推荐文章于 2022-05-13 08:09:52 发布

看云清雾淡

最新推荐文章于 2022-05-13 08:09:52 发布

阅读量1.1k

点赞数 1

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_53366282/article/details/123568237

版权

这篇博客主要探讨了Vue.js的内置指令实践和事件处理。首先，通过实例展示了如何使用Vue的内置指令，如v-if、v-for等，并通过alt+b快捷键运行代码展示结果。接着，文章转向Vue事件的练习，详细讲解了如何绑定和处理各种DOM事件，为开发者提供了深入理解Vue事件机制的实践指导。

摘要由CSDN通过智能技术生成

1.vue的内置指令练习

2. vue事件的练习

1.vue的内置指令练习

<head>
    <title>内置指令</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 建议用 v-if   -->
        <p><div v-if="isShow">v-if</div></p>
        <p><div v-show="isShow">v-show</div></p>
        <p><button @click="isShow=!isShow">隐藏/显示</button></p>
        <p>———————————————————————————————————————————————————————————————</p>
        <!-- v-for 可以实现页面的渲染 -->
        <!-- 遍历数组 -->
        <div v-for="(value,i) in list">
            索引：{
  {i}}。值：{
  {value}}
        </div>
        <!-- 遍历对象数组-->
        <div v-for="(user,i) in olist">
            索引：{
  {i}}.名称：{
  {user.name}}.年龄：{
  {user.age}}
        </div>
        <!-- 遍历对象 -->
        <div v-for="(value,i,j) in object">