Vue常用指令

1.指令:

HTML标签上带有v-前缀的特殊属性,不同指令具有不同含义。

2.常用指令:

v-bind-绑定属性值,实现属性的动态变化
v-model-实现元素的双向数据绑定
v-on绑定事件(单击等),实现事件发生调用方法
v-if v-else-if v-else相当于if-else的用法,条件性渲染元素,true渲染,否则不渲染
v-show相当于v-if条件判断后显示功能效果相同,但v-show会在vue后台源码显示,display为none时渲染,否则不渲染,两者渲染方式不同。
v-for循环遍历,加标签遍历
Vue常用指令_第1张图片

3.代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令</title>
    <script src="vue2.0.js"></script>
</head>
<body>
    <div id="root">
        <div v-if="count ==3">a</div>
        <div v-else-if="count ==4">b</div>
        <div v-else>c</div><br>
       <!--实现视图和输入修改同步的功能,即双向绑定 -->
       <input v-model="count"><hr>
       <div v-show="count==3">div-show</div>
       <!-- 循环遍历addrs数组结果放入addr模板中,普通遍历 -->
       <div v-for="addr in addrs">
        <!-- 通过插值模板将数据取出 -->
        {{addr}}<hr>
       </div>
       <!-- 索引遍历:遍历数字编号,value-遍历内容 index-遍历索引,0开始-->
       <div v-for="(value,index) in addrs">
        {{index+1}}-{{value}}
       </div>
        <!-- v-bind绑定href超链接,可以实现href的动态变化 -->
       <!-- -完整写法--> 
       <a v-bind:href="url">点击一下</a> 
       <!--简化写法--> 
       <a :href="url">点击一下</a>
       <!-- 双向数据绑定,实现数据的同步变化 -->
       <input v-model="url">
       <!-- v-on绑定点击事件,调用show方法 -->
       <input type="button" value="button1" v-on:click="show()"><br>
       <!-- 简化写法 -->
       <input type="button" value="button1" @click="show()"><br>
    </div>
    <script>
        new Vue({
            el:"#root",
            data(){
                return{
                    url:"https://www.baidu.com",//模型赋初值
                    count:3,
                    addrs:["北京","上海","西安"]//建立数组
                }
            },
            methods: {//定义方法
                show(){
                    alert("click me once!");
                }
            },
        })
    </script>
</body>
</html>

你可能感兴趣的:(Vue,vue.js,javascript,前端)