Vue（二）

博主： Xherlock
发布时间：2022 年 03 月 23 日
843 次浏览
暂无评论
4769字数
分类： Vue Web前端

# Vue（二）

## 本地应用

### v-if

根据表达式真假，切换元素的显示和隐藏（操纵dom元素）

~~~vue
<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">Xherlock</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                isShow: false
            },
            methods: {
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>
~~~

* v-if指令作用是：根据表达式的真假切换元素的显示状态
* 本质是通过操纵dom元素来切换显示状态
* 表达式的值为true，元素存在于dom树中；为false，从dom树中移除
* 频繁的切换v-show，反之使用v-if，前者的切换消耗少

### v-bind

设置元素的属性（eg：src、title、class）

~~~vue
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt=""style="">
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive"style="">
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive"style="">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                imgSrc: "./1.jpg",
                imgTitle: "Xherlock",
                isActive: false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>
~~~

* v-bind指令的作用是：为元素绑定属性
* 完整写法v-bind:属性名
* 简写可省略v-bind
* 需要动态的增删class建议使用对象的方式

### 图片切换

简单轮播效果

~~~vue
<!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>Vue</title>
    <style>
        .center {
            text-align: center;
            border: 5px solid blue;
        }
        .op{
            height: 500px;
        }
        .left{
            float: left;
            margin-top: 150px;
        }
        .right{
            float: right;
            margin-top: 150px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="center">
            <h2>Xherlock</h2>
            <a href="javascript:void(0)" v-show="index!=0" class="left" @click="prev">
                <img src="./images/prev.png" alt=""style="">
            </a>
            <img :src="imgArr[index]" alt="" class="op"style="">
            <a href="javascript:void(0)" v-show="index!=9" class="right" @click="next">
                <img src="./images/next.png" alt=""style="">
            </a>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                imgArr:[
                    "./images/1.jpg",
                    "./images/2.jpg",
                    "./images/3.jpg",
                    "./images/4.jpg",
                    "./images/5.jpg",
                    "./images/6.jpg",
                    "./images/7.jpg",
                    "./images/8.jpg",
                    "./images/9.jpg",
                    "./images/10.jpg"
                ],
                index:0
            },
            methods: {
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            }
        })
    </script>
</body>
</html>
~~~

![image-20220323205334359.png](http://xherlock.top/usr/uploads/2022/03/3222717040.png)

### v-for

根据数据生成列表结构

~~~vue
<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="删除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{ index+1 }} : Xherlock~{{item}}
            </li>
        </ul>
        <p v-for="item in city" v-bind:title="item.name">
            {{ item.name }}
        </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                arr:["a","b","c","d","e"],
                city:[
                    {name:"Beijing"},
                    {name:"Chengdu"},
                    {name:"Zhengzhou"}
                ]
            },
            methods: {
                add:function(){
                    this.city.push({name:"Shanghai"});
                },
                remove:function(){
                    this.city.shift();
                }
            }
        })
    </script>
</body>
~~~

![image-20220323210557745.png](http://xherlock.top/usr/uploads/2022/03/1346874241.png)

![image-20220323210614841.png](http://xherlock.top/usr/uploads/2022/03/4057398363.png)

* v-for指令的作用是：根据数据生成列表
* 数组经常和v-for结合使用
* 语法(item,index) in 数据
* item和index可以结合其他指令一起使用

### v-on补充

传递自定义参数，事件修饰符

~~~vue
<body>
    <div id="app">
        <input type="button" value="求和" @click="show(1,2)">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
      
            },
            methods: {
                show:function(p1,p2){
                    alert(p1+p2);
                },
                sayHi:function(){
                    alert("Hi");
                }
            }
        })
    </script>
</body>
~~~

### v-model

获取和设置表单元素的值（双向数据绑定）

~~~vue
<body>
    <div id="app">
        <input type="button" value="修改值" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <p>{{message}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                message:"Xherlock"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message="Sherlock";
                }
            }
        })
    </script>
</body>
~~~

![image-20220323211858845.png](http://xherlock.top/usr/uploads/2022/03/3151955859.png)

* v-model指令的作用是便捷的设置和获取表单元素的值
* 绑定的数据会和表单元素值相关联
* 绑定的数据$\longleftrightarrow$表单元素的值

最后修改：2022 年 03 月 29 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Reverse（十一）
浏览次数: 2629
Win11新机鼓捣记录
浏览次数: 2382
栈~数制转换
浏览次数: 1604
C++学习
浏览次数: 1603
Python实现文件管理系统（重命名和删除）
浏览次数: 1575

顶点软件
你写得非常清晰明了，让我很容易理解你的观点。
mars
博主你好，请问怎么知道的alloc函数属于Buffer下的方法...
lj
该评论仅登录用户及评论双方可见
Mr.Guan
:@(赞一个)
Typecho
欢迎加入 Typecho 大家族

HTML2
浏览次数: 563
运输层（二）
浏览次数: 502
Reverse（七）
浏览次数: 413
文件管理
浏览次数: 454
实训第四天
浏览次数: 403

发表评论 取消回复

Vue（二）

发表评论取消回复