我的web程序设计学习记录9-优快云博客

本文链接：https://blog.youkuaiyun.com/zx616122/article/details/108174952

本文介绍了Vue.js中的自定义指令v-no，它用于监听DOM事件并执行JavaScript代码。文章通过一个具体的选项卡实例展示了v-no如何与方法结合使用，实现数据的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue指令2

v-no

v-no指令可以监听dom事件，并在触发时运行一些JavaScript代码

还可以接收一个需要调用的方法名称，也可以在内联JavaScript语句中调用方法

html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-no示例</title>
    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="v-onapp">
<h2>数据:{{num}}</h2>
<button v-on:click="addition">加</button>
    <button v-on:click="subtraction">减</button>
    <button @click="say('hello')">你好</button>
</div>
<script src="1.js"></script>
</body>
</html>

js`new Vue({
el:"#v-onapp",
data:{
num:0
},
methods:{
addition:function (e) {
this.num++

    },
    subtraction() {
        this.num--

    },
    say:function (message) {
      alert(message)
    }
}

})`
在这里插入图片描述

具体实例

选项卡
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="css/1.css" media="screen" type="text/css" />
</head>
<body>
<div class="app">
    <ul>
        <li v-for="(item,index) in list" @click="tab(index)">
            {{item.tab}}
        </li>
    </ul>
    <div v-show="item.show" v-for="(item,index) in list">
        {{item.title}}
    </div>
</div>
<script src="js/1.js"></script>
</body>
</html>

new Vue({
    el: ".app",
    data: {
        list: [
            {tab: "HTML", show: true, title: "学习html的基础知识"},
            {tab: "CSS", show: false, title: "学习css的基础知识"},
            {tab: "Javascript", show: false, title: "学习Javascript的基础知识"},
            {tab: "vue", show: false, title: "学习vue的基础知识"}
        ]
    },
    methods: {
        tab: function (index) {
            for (var i = 0; i < this.list.length; i++) {
                this.list[i].show = false;
            }
            this.list[index].show = true;
        }
    }
})

css

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
.app{
    width:600px;
    margin:0 auto;
}
ul{
    overflow: hidden;
    width:600px;

}
div{margin: 0;
    padding: 0;}
li{

    list-style: none;
    float: left;
    width:150px;
    border:1px solid #000;
    text-align: center;


}
.app div{
    width: 600px;
    border:1px solid #000;
    text-align: center;
    line-height: 100px;
    height:100px;

}
li{ width:150px; height:40px; background:#cccccc;}
li:link{
    color: #0099ff;
    text-decoration: none;
}
li:visited{
    text-decoration: underline;
    color: #cccccc;
}
li:hover{ background:#0099ff;}
li:active{text-decoration: none}