vue学习day02-Vue指令-v-html、v-show与v-if、v-else与v-else-if、v-on、v-bind、v-for、v-model

在Vue中，指令是用来给HTML元素添加特殊的属性，这些属性的名字以v-开头。Vue的指令可以使我们的页面更加的灵活和强大。下面是一些常用的Vue指令：

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, v-else-if, v-else: 根据表达式的值的真假条件渲染元素。如果表达式的值为true，元素会被渲染并显示，如果为false，元素会被移除。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

new Vue({
  el: '#app',
  data: {
    type: 'B'
  }
})

4. v-on: 用来监听DOM事件，比如click, mouseover等。

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

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

5. v-bind: 用来绑定一个或多个属性值，比如href, src等。

<img v-bind:src="imageSrc">

new Vue({
  el: '#app',
  data: {
    imageSrc: 'path_to_image.jpg'
  }
})

以上就是一些常用的Vue指令，具体使用时需要根据实际需求选择合适的指令。