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. 以对象的形式绑定

     人工智能无所不能

  2. 以数组的形式绑定

     
     选择人工走向成功

• 绑定style

  1. 直接绑定样式

     人工智能无所不能

  2. 绑定data里的值

     
     人工智能无所不能
     data(){
             return{
                 // 定义对象
                 data1:{
                     // 定义数据
                     color:"red",
                 }
             }
         }

  3. 以数组的形式绑定

      
     人工智能无所不能
     data(){
             return{
                 // 定义对象
                 data1:{
                     // 定义数据
                     color:"red",
                 }
             }
         }

  4. 绑定计算属性

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