vue常用指令介绍（附带源码例子）

最新推荐文章于 2024-08-14 11:49:00 发布

荆棘鸟的天空

最新推荐文章于 2024-08-14 11:49:00 发布

阅读量269

点赞数

分类专栏： vue 文章标签： vue

逍遥书生

本文链接：https://blog.csdn.net/WYYCDY/article/details/115380153

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue常用指令介绍

一、v-bind : 用于HTML属性中值的更新
二、v-if v-else: 判断逻辑
三.v-model : 数据双向绑定
四.v-on ：事件绑定
v- for ：数据循环
- 总结

一、v-bind : 用于HTML属性中值的更新

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>v-bind 用于HTML属性中值的更新 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
      <a v-bind:href="url">百度一下</a>
    </div>
    <script>     
        new Vue({
          el:"#app",        //表示要绑定的 div是谁 ，类似于jquery的id选择器
          data:{            //数据源 ，这里的数据用于显示到 <div>标签中 , 将来此处的数据源是动态传递的
            url:"http://www.baidu.com"
          }
        })
    </script>
</body>
</html>

二、v-if v-else: 判断逻辑

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> v-if v-else: 判断逻辑 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">

    <div v-if="Math.random() > 0.5"> 结果大于0.5</div>
    <div v-else> 结果小于0.5!!!!!!!</div>

    </div>
    <script>     
        new Vue({
          el:"#app",        //表示要绑定的 div是谁 ，类似于jquery的id选择器
          data:{            //数据源 ，这里的数据用于显示到 <div>标签中 , 将来此处的数据源是动态传递的
            
          }
        })
    </script>
</body>
</html>

三.v-model : 数据双向绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>v-model : 数据双向绑定 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        {{phone}}
        <br>
        <input type="text" v-model="phone">
    </div>
    <script>     
        new Vue({
          el:"#app",        //表示要绑定的 div是谁 ，类似于jquery的id选择器
          data:{            //数据源 ，这里的数据用于显示到 <div>标签中 , 将来此处的数据源是动态传递的
            phone:"1000212"
          }
        })
    </script>
</body>
</html>

四.v-on ：事件绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>v-on ：事件绑定 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    
    <div id="app">
            {{str}}
        <br>
   <button v-on:click="show"> 点击 </button>
    </div>
    <script>     
        new Vue({
          el:"#app",        //表示要绑定的 div是谁 ，类似于jquery的id选择器
          data:{            //数据源 ，这里的数据用于显示到 <div>标签中 , 将来此处的数据源是动态传递的
          str:"你好"
          },
          methods:{
              show(){
                  this.str = "今天天气真好"
              }
          }
        })
    </script>
</body>
</html>

v- for ：数据循环

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> v- for ： 数据循环 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">

    <div v-for="p in products">
        {{p.name}}
    </div>
    <hr>
    <ol>
        <li v-for="p1 in products">
            {{p1.name}}
        </li>
    </ol>
    </div>
    <script>     
        new Vue({
          el:"#app",        //表示要绑定的 div是谁 ，类似于jquery的id选择器
          data:{            //数据源 ，这里的数据用于显示到 <div>标签中 , 将来此处的数据源是动态传递的
            //提供一个集合数据
            products:[
                {name:"ip20"},
                {name:"小米11"},
                {name:"mysql"}
          ]
          }
        })
    </script>
</body>
</html>