Vue简单学习之关于 html 代码标签属性 v-bind 和v-on 的使用

最新推荐文章于 2024-07-14 11:04:20 发布

默默的菜鸟--

最新推荐文章于 2024-07-14 11:04:20 发布

阅读量900

点赞数

分类专栏：前端 Vue 文章标签： Vue v-bind v-on

本文链接：https://blog.csdn.net/qq_34160679/article/details/88179541

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

v-bind 是vue 绑定属性的指令

<input type="button" name="按钮" value="按钮" v-bind:title="mytitle + '新加的'">

注意： v-bind 可以简写为 :要绑定的属性，v-bind 中可以写合法的js 表达式
```
<input type="button" name="" value="按钮" :title="mytitle + '新加的'">
```

v-on 用来绑定DOM事件机制，比如onclick事件，鼠标移入/移除事件等
```
<input type="button" name="" value="按钮2" :title="mytitle + '新加的'" v-on:click="show">
```
- 其中show是方法的名称，需要在Vue 对象实例中methods属性中定义，详情查看实例
- 可以简写为 @要绑定的事件（@click）

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind 是vue 绑定属性的指令-->
        <!--<input type="button" name="按钮" value="按钮" v-bind:title="mytitle + '新加的'">-->
        <!-- 注意： v-bind 可以简写为:要绑定的属性，v-bind 中可以写合法的js 表达式-->
        <input type="button" name="" value="按钮" :title="mytitle + '新加的'">

        <!-- Vue中 提供了v-on 用来绑定事件机制 -->
        <input type="button" name="" value="按钮2" :title="mytitle + '新加的'" v-on:click="show">

    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                mytitle: "这是我设置的一个title",
            },
            methods: { // 这个methods 属性中定义了当前Vue 实例中使用到的方法
                show: function() {
                    alert("我是一个按钮")
                }
            }
        })
    </script>
</body>
</html>