【黑马Vue教程4】文本切换案例完整版代码指令分析 v-show 使用方式: <标签 v-show="条件"></标签

完整版代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本切换案例</title>
</head>
<body>
    <div id = "app">
        <button v-show="index > 0" v-on:click = "index --" >上一页</button>
        <div>
            <!-- v-bind: 的简写,可以修改标签内的属性 -->
            <a :href="list[index].href">{{ list[index].title }}</a>
        </div>
        <!-- v-on: 的简写,可以监听事件进行函数操作 -->
        <button v-show="index < list.length -1" @click="fn">下一页</button>
    </div> 

    <script src="../vue.js"></script>
    <script>
        const V = new Vue(
            {
                // 通过el配置选择器,指定Vue管理的是那个盒子
                el: "#app",
                data:{
                    index: 0,
                    list: [
                        {
                            "href":"http://www.baidu.com",
                            "title": "百度"
                        },
                        {
                            "href":"https://www.bilibili.com/video/BV1HV4y1a7n4?spm_id_from=333.788.player.switch&vd_source=a00997d5c5ca68605994bb65e9badad0&p=15",
                            "title": "黑马Vue教程"
                        },
                        {
                            "href":"https://juejin.cn/",
                            "title":"掘金官网"
                        },
                        {
                            "href":"https://www.csdn.net/",
                            "title":"CSDN官网"
                        },
                        {
                            "href":"https://www.zhihu.com/",
                            "title":"知乎官网"
                        }
                    ] 
                },
                methods:{
                    fn(){
                        this.index ++
                    }
                }
            }
        )
    </script>
</body>
</html>

指令分析

v-show

使用方式: <标签 v-show="条件"></标签> 作用: 当条件成立时,标签才会在页面上展示,不成立时,则会通过css样式隐藏这个标签

v-bind

使用方式:<标签 v-bind:属性 = "属性值"></标签> 作用: 可以修改标签内的属性(如src、href),将其设置为特定的属性值简写: :属性="属性值"

v-on

使用方式: <标签 v-on:事件="函数"></标签> 作用: 当标签内的事件被触发后执行对应的函数(例如点击事件(click)) 简写: @事件:函数