Vue指令-02：v-html，v-show和v-if，v-on

在Vue中，v-html, v-show, v-if, v-on是常用的指令。以下是这些指令的简单解释和用法：

1. v-html: 用于输出HTML，但是需要注意，它会替换掉元素内部的内容，不建议用于输出用户可能输入的内容，可能会有XSS攻击的风险。

<div v-html="rawHtml"></div>

new Vue({
  el: '#app',
  data: {
    rawHtml: '<span>This should be red.</span>'
  }
})

2. v-show: 根据表达式之真假值，切换元素的 display CSS 属性。如果表达式为false，元素会被隐藏，如果为true，则会显示。

<div v-show="isShow">这个div会根据isShow的值显示或隐藏</div>

new Vue({
  el: '#app',
  data: {
    isShow: true
  }
})

3. v-if: 根据表达式的值的真假条件渲染元素。如果表达式为false，元素会被移除。

<div v-if="isShow">这个div会根据isShow的值被创建或销毁</div>

new Vue({
  el: '#app',
  data: {
    isShow: true
  }
})

4. v-on: 用于监听指定的事件，并执行一些JavaScript代码。

<button v-on:click="doSomething">点击我</button>

new Vue({
  el: '#app',
  methods: {
    doSomething: function() {
      console.log('Button was clicked!');
    }
  }
})

以上是这四个指令的基本用法，在实际开发中可以根据需要选择合适的指令来实现需求。