Vue的指令介绍

最新推荐文章于 2024-05-21 19:09:41 发布

ૢ花开এ十一࿐

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量117

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_68450731/article/details/130116886

版权

1.v-model：v-model用于表单数据的双向绑定

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='inp'>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                inp:'1234'
            }
        })
    </script>
</body>
</html>

2.v-if : 控制显示隐藏控制方式添加/移除元素

相比之下消耗性能可能会让浏览器重排重绘，所以频繁切换的时候使用v-show更好一些

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 兄弟元素必须挨着相邻 -->
    <div id="app">
        <h1 v-if="bool">你好</h1>
        <h1 v-else>不好</h1>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                bool:'' //true显示 false消失
            }
        })
    </script>
</body>
</html>

3.v-show : 同上v-if显示隐藏

代码演示：与v-if不同的是v-show是控制css样式 style="display:none;"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="n" placeholder="输入数字">
        <h1 v-show="n==1">查话费</h1>
        <h1 v-show="n==2">查宽带</h1>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                n:''
            }
        })
    </script>
</body>
</html>

4.v-for : 语法： v-for="对象，事件和数组"

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.js"></script>
    <style>
        *{
           margin: 0;
           padding: 0;
        }
        ul {
           padding: 0;
           overflow: hidden;
           margin: 0 auto;
        }
        li {
           list-style: none;
           width: 60px;
           height: 30px;
           text-align: center;
           line-height: 30px;
           float: left;
        }
        .active {
           background: skyblue;
           color: #fff;
        }
       .boo {
           width: 60px;
           height: 30px;
           line-height: 30px;
           text-align: center;
           margin-top: 30px;
       }
       </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="arr , click  in arr" :class="{active:index == click}" v-on:click="tabNav(click,item)">{{arr}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                arr:['新闻' , '体育' , '娱乐' , '国际'],
                index:0,
            },
            methods:{
                tabNav:function(click){
                    this.index = click
                }
            }

        })
    </script>
</body>
</html>

5.其他指令下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 设置html内容 -->
        <p v-html="html"></p>
        <!-- 设置文本内容 -->
        <p v-text="text"></p>
        <input type="text" v-model='inp'>
        <!-- v-once只编译一次 -->
        <p v-once>{{inp}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                html:'<span>span</span>',
                text:'hello',
                inp:'1234'
            }
        })
    </script>
</body>
</html>

6.v-bind : :class :style :id

用法 : 获取样式

语法：<h1 v-bind:title="tit">this is test</h1>

演示代码:

<!-- 同样的假设我们定义了以下这些 -->
<!-- 假设我们这样定义了data数据 -->
data(){
  return {
    fontSize:true,
    fontColor:true,
  }
}
<!-- 假设我们这样定义了methods方法 -->
methods:{
  getStyle(){
    return {this.fontSize,this.fontColor};
  },
}
<!-- 假设我们定义了这些类 -->
<style>
.fontSize{
  font-size:30px;
}
.fontColor{
  color:red;
}
</style>

<!-- 那么我们可以这样去添加这些类 -->
<h1 :class="getStyle()"></h1>

ૢ花开এ十一࿐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue的指令介绍

相比之下消耗性能可能会让浏览器重排重绘，所以频繁切换的时候使用v-show更好一些。代码演示：与v-if不同的是v-show是控制css样式 style="display:none;语法：<h1 v-bind:title="tit">this is test</h1>4.v-for : 语法： v-for="对象，事件和数组"1.v-model：v-model用于表单数据的双向绑定。2.v-if : 控制显示隐藏控制方式添加/移除元素。3.v-show : 同上v-if显示隐藏。
复制链接

扫一扫