vue指令大全

 

<template>
  <div class="home">
    <p>v-show指令</p>
    <p v-show="isshow">哈哈哈哈哈哈哈</p>
    <button @click="btnone">点击</button>
    <p>v-for指令</p>
    <p v-for="(item,index) in list" :key="index">{{item}}</p>
    <p>v-if指令</p>
    <p v-if="arr>8">{{arr}}</p>
    <p>v-model</p>
    {{vmodelal}} <br>
    <input type="text" v-model="vmodelal" >
    <p>v-html指令</p>
    <p v-html="html"></p>
    <p>v-text指令</p>
    <p v-text="text"></p>
    <p>v-pre指令</p>
    <p v-pre>{{message}}</p>
    <p>v-on指令</p>
    <button v-on:click="btntwo">点击出弹框</button>
    <br>
    <br><hr><br>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data () {
    return {
      isshow:true,
      list:{
        name:"1111111",
        age:"2222222",
        sex:"3333333"
      },
      arr:90,
      vmodelal:'',
      html:"<i>今天星期六<i>",
      text:"好好学代码努力挣大钱",
      message:"要相信时间一定会被你的努力感动"
    }
  },
  methods: {
    btnone(){
      this.isshow=!this.isshow
    },
    btntwo(){
      alert(this.message)
    }
  }
}
</script>