第十二周周记（11周续）

最新推荐文章于 2026-03-09 00:09:38 发布

原创最新推荐文章于 2026-03-09 00:09:38 发布 · 154 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细讲解了Vue.js中的条件语句（v-if）、循环渲染（v-for）、样式绑定（class与style）、以及事件处理器（包括修饰符）。实例演示了如何在Vue应用中灵活运用这些核心功能。

一、Vue.js 条件语句

条件判断

v-if

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,// v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素
    ok: true
  }
})
</script>

！！v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。！！

二、Vue.js 循环语句

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '我是谁',
      url: 'http://www.baidu.com',
      slogan: '学的是梦想！'
    }
  }
})
</script>

在这里插入图片描述

也可以选择迭代次数（整数）

  <li v-for="n in 10">
     {{ n }}

三、Vue.js 样式绑定

1、class 属性绑定

可以为 v-bind:class 设置一个对象，从而动态的切换 class

<div class="static active text-danger"></div>

new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})

在这里插入图片描述

2、Vue.js style(内联样式)

<div style="color: green; font-size: 30px;">哈哈哈哈</div>

四、Vue.js 事件处理器

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

在这里插入图片描述

<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
 
<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

在这里插入图片描述

事件修饰符

.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>