VUE 入门

练习 1 练习 2 练习 3 前往 VUE 入门教程

VUE 指令

练习 1 练习 2 练习 3 练习 4 练习 5 练习 6 练习 7 练习 8 练习 9 练习 10 练习 11 练习 12 练习 13 练习 14 前往 VUE 指令教程

VUE 方法

练习 1 练习 2 练习 3 前往 VUE 方法教程

VUE 计算属性

练习 1 练习 2 前往 VUE 计算属性教程

VUE 观察者

练习 1 练习 2 练习 3 前往 VUE 观察者教程

VUE 扩展

练习 1 练习 2 练习 3 练习 4 前往 VUE 扩展教程

VUE 组件

练习 1 练习 2 练习 3 练习 4 练习 5 练习 6 练习 7 练习 8 前往 VUE 组件教程

VUE 插槽

练习 1 练习 2 练习 3 前往 VUE 插槽教程

VUE 引用

练习 1 练习 2 前往 VUE 引用教程

VUE 生命周期钩子

练习 1 练习 2 前往 VUE 生命周期钩子教程

VUE 提供/注入

练习 1 练习 2 前往 VUE 提供/注入教程

VUE 路由

练习 1 练习 2 前往 VUE 路由教程

VUE 动画

练习 1 练习 2 练习 3 练习 4 前往 VUE 动画教程

VUE 构建

练习 1 练习 2 前往 VUE 构建教程

×

×

正确

练习：

完成代码，使图像在点击按钮时切换显示。

<template> <button v-on:click="showImg = !showImg"> Toggle image </button> <img src="flower.jpg" alt="flower" v-show="showImg"> </template> <script> export default { data() { return { showImg: true } } } </script>

<template> <button @:click="showImg = !showImg"> Toggle image </button> <img src="flower.jpg" alt="flower" v-show="showImg"> </template> <script> export default { data() { return { showImg: true } } } </script>

不正确

点击此处重试

正确

下一题 ❯

<template>
  <button w3exercise_input_no_0
="showImg = !showImg">
    Toggle image
  </button>
  <img src="flower.jpg" alt="flower" v-show="showImg">
</template>

<script>
  export default {
    data() {
      return {
        w3exercise_input_no_1
: true
      }
    }
  }
</script>