前端 Vue框架学习实例（六）

本文主要是介绍前端 Vue框架学习实例（六），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.事件监听

v-on的基本使用

语法糖的写法@。。。实现一个简单计数器。

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: 0
            },
            methods: {
                increment() {
                    this.message++
                },
                decrement() {
                    this.message--
                }
            }
        })
    </script>
</body>

v-on的参数

@click="increment"

@click="increment()

@click="btn2click(10)

@click="btn3click(123,$event)

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <!-- -------------------------------------------------------- -->
        <button @click="increment">1</button>
        <button @click="increment()">2</button>
        <!-- -------------------------------------------------------- -->
        <button @click="btn2click(10)">3</button>
        <!-- -------------------------------------------------------- -->
        <button @click="btn3click(123,$event)">4</button>
        <!-- -------------------------------------------------------- -->
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: 0
            },
            methods: {
                increment() {
                    this.message++
                },
                btn2click(event) {
                    console.log(event);
                    this.message += event
                },
                btn3click(abc, event) {
                    console.log(abc, event);
                    // this.message += event
                }
            }
        })
    </script>
</body>

v-on的修饰符

stop修饰符，阻止冒泡。

<button @click.stop="butclickstop">添加stop</button>

.prevent修饰符，阻止自动提交

</form>

键盘修饰符

.once只触发一次

<button @click.once="btn2once">只触发一次</button>

2.条件判断

v-if的基本使用

最基础的判断操作

<h2>
            <p v-if="score>90">优秀</p>
            <p v-else-if="score>70">良好</p>
            <p v-else-if="score>60">及格</p>
            <p v-else>不及格</p>
        </h2>

在使用这种判断的时候，也可以使用计算属性computed

computed: {
                result() {
                    let showScore = '';
                    if (this.score > 90) {
                        showScore = '优秀'
                    } else if (this.score > 70) {
                        showScore = '良好'
                    } else if (this.score > 60) {
                        showScore = '及格'
                    } else {
                        showScore = '不及格'
                    }
                    return showScore
                }
            }

v-show和v-if的对比

v-if 当条件为false时，不会存在于DOM中

v-show 当条件为false时，添加display：none；

<body>
    <div id="app">
        <!-- v-if 当条件为false时，不会存在于DOM中
             v-show 当条件为false时，添加display：none； -->
        <h2 id="aaa" v-if="isShow">{{message}}</h2>
        <h2 id="bbb" v-show="isShow">{{message}}</h2>
        <!-- 在显示和隐藏切换频率很高，使用v-show -->
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！',
                isShow: true
            }
        })
    </script>
</body>

条件渲染案例

点击按钮，切换账户的类型

思路：

写上两组账号类型的标签
使用v-if，如果isuser=true，则显示用户账号；默认是用户账号。
给按钮绑定点击事件，对isuser取反
添加key解决复用

<body>
    <div id="app">
        <span v-if="isUser">
            <label for="username">用户账号</label>
            <!-- 添加Key解决复用问题 -->
            <input type="text" id="username" placeholder="用户账号" key="username">
            </span>
        <span v-else>
            <label for="email">用户邮箱</label>
            <input type="text" id="email" placeholder="用户邮箱" key="eamil">
            </span>
        <button @click="isUser = !isUser">切换类型</button>
    </div>

    <script type="text/javascript">
        let app = new Vue({
            el: '#app',
            data: {
                isUser: true
            }

        })
    </script>
</body>

3.循环遍历

v-for遍历数组

<body>
    <div id="app">
        <!-- 在遍历过程中，没有使用索引值（下标值） -->
        <ul>
            <li v-for="item in names">{{item}}</li>
        </ul>
        <hr>
        <!-- 在遍历过程中，使用索引值（下标值） -->
        <ul>
            <li v-for="(item,index) in names">{{index +1}}.{{item}}</li>
        </ul>


    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                names: ['张三', 'krbe', 'james', 'jack']

            }
        })
    </script>
</body>

v-for遍历对象

<body>
    <div id="app">
        <!-- 在遍历对象过程中，如果只是获取一个值，那么获取到的是value -->
        <ul>
            <li v-for="item in info">{{item}}</li>
        </ul>
        <hr>
        <!-- 在遍历对象过程中，获取key和value (value,key)-->
        <ul>
            <li v-for="(value,key) in info">{{key}}:{{value}}</li>
        </ul>
        <hr>
        <!-- 在遍历对象过程中，获取key和value 和index (value,key,index)-->
        <ul>
            <li v-for="(value,key,index) in info">{{index}}---{{key}}---{{value}}</li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                info: {
                    name: '张三',
                    age: 18,
                    height: 888
                }
            }
        })
    </script>
</body>

这篇关于前端 Vue框架学习实例（六）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript

前端 Vue框架学习实例（六）

1.事件监听

2.条件判断

3.循环遍历

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯