Vue指令

vue指令（常用）

v-text

将标签里的内容替换成 v-text 里属性所对应的值

代码展示：

# html代码
  <div v-text="msg">
      hello Vue
  </div>

# javsScript代码
  data: {
      msg: '你好 VUE'
  }

浏览器显示：

你好 VUE

v-html

将标签里的内容替换成 v-html 里属性所对应的html模板

代码展示：

# html代码
  <div v-html="html">
      hello Vue
  </div>

# javsScript代码
  data: {
         html: `<ul>
               <li><a href="">vue1</a></li>
               <li><a href="">vue2</a></li>
               <li><a href="">vue3</a></li>
              </ul>`
  }

浏览器显示：

v-show

1.控制内容的显示与隐藏

（1）相当于给标签加了 display: none; 属性。

（2）内容消失时，对应的空间将被销毁。

代码展示：

# html代码
  <button @click="handleClick">点击显示/隐藏</button>
  <div v-show="show" style="background-color: skyblue;">
      hello Vue
  </div>

# javsScript代码
  data: {
      show: true,
  },
  methods: {
      handleClick() {
         this.show = !this.show
      }
  },

v-bind

1.动态地绑定一个或多个属性

语法糖:

  <div v-bind:class="attriBute">
   # 下面为语法糖写法
   <div :class="attriBute">

代码展示：

# html代码
  <ul>
     <li v-for="(item, index) in attriBute" :id="index">             # 此时循环的 index 动态绑定给了 id
          123
     </li>
  </ul>

# javsScript代码
  data: {
      attriBute: [1, 2, 3, 4, 5, 6],
  },

浏览器显示：

此时循环的 index 动态绑定给了 id

v-model

1.当数据变化视图同步更新，当视图更新数据也会同步更新

代码展示：

# html代码
  """ 当 input 框中得值改变时，对应 data 中的 something 就会改变，从而使得引用它的地方也跟着改变 """
  """ 即 span 标签中的 something 会跟着改变"""
  <input type="text" v-model="something"> ---------> <span>{{something}}</span>

# javsScript代码
  data: {
     something: '',
  },

浏览器显示：

v-if

1. 通过判断，控制元素是否加载。

代码展示：

# html代码
  <div v-if="condition>90">优秀</div>
  <div v-else-if="condition>60">及格</div>
  <div v-else>不及格</div>

# javsScript代码
  data: {
      condition: 100,
  },

浏览器显示：

v-for

1. 对数据进行遍历

key：提高页面刷新速度

代码展示：

# html代码
  <ul>
        <li v-for="(item, index) in car" :key="index">
            {{item}}
       </li>
  </ul>

# javsScript代码
  data: {
      car: ['奔驰', '宝马', '奥迪', '保时捷'],
  },

浏览器显示：

v-on

1.给标签绑定点击事件

语法糖:

  <button v-on:click="handle"></button>
   # 下面为语法糖写法
   <button @click="handle"></button>

代码展示：

# html代码
  <button v-on:click="handle">点击看美女</button>
  <img :src="imgs" alt="" width="100px" height="110px">

# javsScript代码
    data: {
        imgs: '',
    },
    methods: {
       handle() {
           this.imgs = './001.png'
       }
   },

浏览器显示：
点击之前：

点击之后：