vue常用指令

vue常用指令

听风知秋雨 1,001 2020-09-15

v-bind(有简写方式)

该指令用来动态修改标签中的属性信息

动态绑定class有两种语法实现

  • 对象语法
  • 数组语法
<div id="app">
    <a v-bind:href="url"></a>
    <!--以下是简写方式-->
    <a :href="url"></a>
    <!--可以动态切换class来改变样式(以下使用的是对象语法)-->
    <!--方法一-->
    <div :class="{a:is-a,b:is-b}">动态切换class</a>
    <!--方法二-->
    <div :class="getClasses()">动态切换class</a>
</div>
var app = new Vue({
  el: '#app',
  data: {
    url: "https://www.baidu.com",
    is-a: true,
    is-b: false  
  },
  methods: {
      getClasses: function(){
          return {a: this.is-a, b: this.is-b}
      }
  }  
})

v-on(有简写方式)

该指令用来绑定事件

  • 在调用方法时省略了小括号,但是方法本身是需要一个参数的,这个时候vue会默认将浏览器生成的event事件对象作为参数传入到方法中
<div id="app">
    <a v-on:click="doSomething">{{message}}</a>
    <!--以下是简写方式-->
    <a @click="doSomething">{{message}}</a>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: '点击'
  },
  methods: {
      doSomething: function(event){
          alert('我被点击了');
          console.log(event);//接收来自浏览器生成的event
      }
  }  
})
  • 如果往单击事件的方法中传入多个参数,要想在接收到浏览器生成的event事件,需要$event
<div id="app">
    <a v-on:click="doSomething">{{message}}</a>
    <!--以下是简写方式-->
    <a @click="doSomething('你好',$event)">{{message}}</a>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: '点击'
  },
  methods: {
      doSomething: function(msg,event){
          alert(msg);
          console.log(event);//接收来自浏览器生成的event
      }
  }  
})

v-if、v-else、v-else-if

该指令用来做判断,如果条件满足就渲染

v-else-if用的少,因为判断条件比较复杂的话可以使用计算属性来判断,注意的是v-else-if不能单独使用

<div id="app">
    <div v-if="isShow">true显示</div>
    <div v-else="isShow">false显示</div>
</div>
var app = new Vue({
    el: "#app",
    data: {
        isShow: true
    }
});

v-show

该指令用来隐藏标签

它和v-if指令的区别是v-if条件不满足不会进行渲染,而v-show一定会渲染,只是设置了隐藏属性(display)

  • 当显示隐藏切换频率高用v-show
  • 当只有一次切换使用v-if
<div id="app">
    <div v-show="isShow">显示</div>
    <button @click="isShow=!isShow">切换</button>
</div>
var app = new Vue({
    el: "#app",
    data: {
        isShow: true
    }
});

v-for

该指令用来遍历数组和对象

  • 遍历数组
<div id="app">
    <ul>
        <!--itm是元素,index是索引,items是数组-->
        <li v-for="itm,index in items">{{index}}--{{itm}}</li>
    </ul>
</div>
var app = new Vue({
    el: "#app",
    data: {
        items: ["海王","狮王","虎王"]
    }
});
  • 遍历对象
<div id="app">
    <!-- 写法一(只获取value) -->
    <ul>
        <li v-for="value in info">{{value}}</li> <!--单个只获取value -->
    </ul>

    <!-- 写法二(获取key和value) -->
    <ul>
        <li v-for="value,key in info">{{key}}--{{value}}</li> 
    </ul>

    <!-- 写法三(获取key、value和索引) -->
    <ul>
        <li v-for="value,key,index in info">{{index}}--{{key}}--{{value}}</li> 
    </ul>
</div>
var app = new Vue({
    el: "#app",
    data: {
        info: {
            name: "李狗蛋",
            age: 20,
            sex: "男"
        }
    }
});

v-model

该指令用来对表单元素数据进行双向绑定

  • 文本输入框text
<div id="app">
    <!--v-model跟value属性绑定的-->
    <input type="text" v-model="message">
    {{message}}
</div>
var app = new Vue({
    el: "#app",
    data: {
        message: "hello"
    }
});
  • 单选框radio
<div id="app">
    <!-- label标签可以实现点击文字就可触发相应绑定的标签 -->
    <label for="male">男</label>
    <input type="radio" name="sex" id="male" value="男" v-model="message"/>
    <br />
    <label for="female">女</label>
    <input type="radio" name="sex" id="female" value="女" v-model="message"/>
    你选择的性别是:{{message}}
</div>
var app = new Vue({
    el: "#app",
    data: {
        message: ""
    }
});
  • 复选框checkbox(有单选和多选)
<div id="app">
    <!-- 单选框 -->
    <label for="agree">同意协议</label>
    <input type="checkbox" id="agree" name="agree" v-model="isAgree"/>
    <p>你选择的是:{{isAgree}}</p>
    <button :disabled="!isAgree">下一步</button>
    </br>

    <!-- 多选框 -->
    篮球:<input type="checkbox" value="篮球" v-model="hobbys">
    足球:<input type="checkbox" value="足球" v-model="hobbys">
    台球:<input type="checkbox" value="台球" v-model="hobbys">
    <p>爱好有:{{hobbys}}</p>
</div>
var app = new Vue({
    el: "#app",
    data: {
        isAgree: false,
        hobbys: []
    }
});
  • 下选框select(单选和多选)
<div id="app">
    <!-- 单选 -->
    <select name="select" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="西瓜">西瓜</option>
        <option value="葡萄">葡萄</option>
    </select>
    <p>喜欢的水果是:{{fruit}}</p>

    <!-- 多选 -->
    <select name="select" v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="西瓜">西瓜</option>
        <option value="葡萄">葡萄</option>
    </select>
    <p>喜欢哪些水果:{{fruits}}</p>
</div>
var app = new Vue({
    el: "#app",
    data: {
        fruit: "葡萄",
        fruits: []
    }
});

v-once

使用该指令表示元素和组件只渲染一次,不会随着数据的变化而变化

<div id="app" v-once>{{ message }}</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

v-html

使用该指令可以把字符串的数据在插值中显示时自动转换为HTML格式

<div id="app" v-html="url">{{ url }}</div>
var app = new Vue({
  el: '#app',
  data: {
    url: "<a href='https://www.baidu.com'>百度一下</a>"
  }
})

v-pre

该指令可以让插值语法不做任何解析,将原本的数据进行原封不动的展示

<div id="app" v-pre></div>
var app = new Vue({
  el: '#app',
  data: {
    message: "不生效"
  }
})

 vue