2.Vue 常用指令

Vue 常用指令:

1.v-text (相当于innerText)：

案例：

<template>
<div>
    <div v-text="text"></div>
</div>
</template>
<script>
exprot default {
data(){
    return {
      text: '文本内容,<br/>'
  }
}
}
</script>

2.v-html (相当于innerHTML)：

<template>
  <div>
      <div v-html="html"></div>
  </div>
</template>
<script>
exprot default {
  data(){
    return {
      html: `
        <ul>
            <li>列表1</li>
            <li>列表2</li>
        </ul>
      `
    }
  }
}
</script>  

3. v-if (移除或者添加元素)：

<template>
  <div>
    <div v-if="isShow"></div>
  </div>
</template>

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

4.v-show （显示或者隐藏元素）：

<template>
  <div>
      <div v-show="isShow"></div>
  </div>
</template>
<script>
  export default {
      data(){
          return {
            isShow: true
          }
      }
  }
</script>

5. v-model (数据双向绑定)：

<template>
  <div>
      <input text="text' v-model="text" />,输入的是：{{text}}
  </div>
</template>
<script>
  export default {
      data(){
          return {
              text: '请输入'
          }
      }
  }
</script>

6. v-bind (数据单项绑定,v-bind:value可简写 :value,省去v-bind部分)：

<template>
    <div>
        <input type="text" v-bind:value="text"/>  ,输入的是：{{text}}
    </div>
</template>
<script>
  export default {
      data(){
          return {
            text: '请输入'
          }
      }
  }
</script>

7.v-for (循环)

<template>
  <div>
      <ul>
          <li v-for="result in list">{result.name}</li>    
      </ul>
  </div>
</template>
<script>
  export default {
      data(){
          return {
              list:[
                  {name: 'zs'},
                  {name: 'ls'}
              ]
          }
      }    
  }
</script>

8. v-on(事件绑定,v-on可简写 @click="", 省略v-on)

<template>
  <div>
      <div v-on:click="clickMe">click me</div>
  </div>
</template>
<script>
export default {
  methods: {
      clickMe() {
        alert('被点击');
      }
  }
}
</script>