前端初识vue常用指令

最新推荐文章于 2024-05-08 13:18:09 发布

初学者阿乐

最新推荐文章于 2024-05-08 13:18:09 发布

阅读量91

点赞数

分类专栏：在路上

本文链接：https://blog.csdn.net/weixin_45971011/article/details/106727772

版权

在路上专栏收录该内容

3 篇文章 0 订阅

订阅专栏

V-for命令:

当循环列表的时候输入v-for命令如下面格式，item：是循环列表的每一项，i是下标序号，in list：是在哪一个容器(需对应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, i) in list">{{item}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',  //这是获取上面定义总的盒子app
            data() {
                return {
                    list:['html','css','js','vue']
                }
            },
        })
    </script>
</body>
</html>



## v-html指令  解释文本的作用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue常用指令</title>
</head>
<body>
    <div id="app">
    
        <div v-html="str"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data() {
                return {

                    str:'<h1>阿乐</h1>',
                }
            },
        })
    </script>
</body>
</html>

## v-model 输入框输入的指令是 v-model 且   在input 输入v-model指令并且绑定对应的id 在全局跟在input绑定的id一致，在input输入内容，都也 会一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue常用指令</title>
</head>
<body>
    <div id="app">
    
     <input type="text" v-model="nickname">
     <h1>{{nickname}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data() {
                return {
                    nickname:'Ale'
                  
                }
            },
        })
    </script>
</body>
</html>


## v-bind 所有属性 都可用v-bind来绑定 也可以简写成：
<body>
    <div id="app">
    <img :src="imgURL" alt=""> //这里直接可以简写成：src
   
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data() {
                return {
                    imgURL:'http://p1.music.126.net/qFByl2TS77pjEO8Z8fN_kg==/109951165049330063.jpg?imageView&quality=89',
                  
                }
            },
        })
    </script>
</body>
## 显示与隐藏 :v-show 后面的id跟js里面id要一致，然后后面是布尔值，而v-show只是隐藏  v-if是删除掉

```javascript
<body>
    <div id="app">
    <img :src="imgURL" alt="">

    <h1 v-show="hey">666666</h1>
    <h1 v-if="hey">88888</h1>
     <!-- <button>切换</button> -->
    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data() {
                return {
                    hey:false,
                    imgURL:'http://p1.music.126.net/qFByl2TS77pjEO8Z8fN_kg==/109951165049330063.jpg?imageView&quality=89',
                  
                }
            },
        })
    </script>
</body>

v-on：click点击事件可以简写成@click

<body>
    <div id="app">
    <img :src="imgURL" alt="">
    <hr>
    <h1 v-show="hey">666666</h1>
    <h1 v-if="hey">88888</h1>
     <button @click="handle">切换</button>
    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data() {
                return {
                    hey:false,
                    imgURL:'http://p1.music.126.net/qFByl2TS77pjEO8Z8fN_kg==/109951165049330063.jpg?imageView&quality=89',
                  
                }
            },
            methods: {
                handle(){
                    this.hey = !this.hey
                }
            },
        })
    </script>
</body>

先写到这了，，可能遗漏了一些，望谅解

初学者阿乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端初识vue常用指令

V-for命令:当循环列表的时候输入v-for命令如下面格式，item：是循环列表的每一项，i是下标序号，in list：是在哪一个容器(需对应<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫