[JavaScript知识库]vue 指令

vue指令

1. v-text:将文本渲染

2. v-html:将文本解析成html代码

3. v-if、v-show:条件渲染，条件为真时渲染数据为假时数据不显示

4. v-for(常用):循环遍历

5. v-on(常用):事件操作，可以简写成@

   • 事件修饰符

     1. .once:单次事件

     2. .prevent:阻止默认事件

     3. .stop:冒泡

     4. .capture:捕获事件(谁有该事件就先触发谁)

     5. .self:自身事件

6. v-model(重要):能够实现和表单控制的双向绑定

   • v-model的修饰符

     1. .lazy:文本框、文本域失去焦点时，才会和框中的数据同步

     2. .trim:失去焦点时过滤掉空格

     3. .number:将输入的数据变为number类型，如果数据无法转换成number,那么就还是原始的类型

v-bind:主要用于属性的绑定,比如class属性、style样式,只要是属性就需要v-bind,可以动态改变样式

• 动态绑定class

  1. 以对象的形式绑定

     <p v-bind:class="{pcolor:true}">人工智能无所不能</p>

  2. 以数组的形式绑定

     <!-- 以数组的形式绑定:数组的格式是以数据的形式绑定 v-bind可以省略-->
     <p :class="[changecolor]">选择人工走向成功</p>

• 绑定style

  1. 直接绑定样式

     <p v-bind:style="{color:'red'}">人工智能无所不能</p>

  2. 绑定data里的值

     <!-- 绑定data里的值:值是以对象形式存在的 -->
     <p :style="data1">人工智能无所不能</p>
     data(){
      ? ? ?  return{
      ? ? ? ? ?  // 定义对象
      ? ? ? ? ?  data1:{
      ? ? ? ? ? ? ?  // 定义数据
      ? ? ? ? ? ? ?  color:"red",
      ? ? ? ? ?  }
      ? ? ?  }
      ?  }

  3. 以数组的形式绑定

      <p :style="[data1]">人工智能无所不能</p>
     data(){
      ? ? ?  return{
      ? ? ? ? ?  // 定义对象
      ? ? ? ? ?  data1:{
      ? ? ? ? ? ? ?  // 定义数据
      ? ? ? ? ? ? ?  color:"red",
      ? ? ? ? ?  }
      ? ? ?  }
      ?  }

  4. 绑定计算属性

      <!-- 以计算属性的形式绑定 -->
     <p :style="pcolor">人工智能无所不能</p>
      // 计算属性要写到computed里 和data methods是同级关系
      ?  computed:{
      ? ? ?  // 变量名是自己随便定义的 计算属性里必须有返回值 返回的内容就是上边定义的变量
      ? ? ?  // pcolor等同于 {color:"red"}
      ? ? ?  pcolor:function(){
      ? ? ? ? ?  return{
      ? ? ? ? ? ? ?  color:'red',
      ? ? ? ? ?  }
      ? ? ?  }
      ?  }

?