Vue其他内置指令

最新推荐文章于 2024-07-23 12:36:06 发布

Natsukiiiii

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量88

点赞数

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/fakerking/article/details/126331282

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.v-bind：将页面元素的属性和模型中的变量进行绑定

<style>
    .active {
        background-color: #2b84da;
    }
</style>
<body>
    <div id="app01">
        <a v-bind:href='link' v-bind:class="{active: isActive}">
                去百度
        </a>
    </div>
    <script>  
        // 绑定属性，简写冒号：
        let app01 = new Vue({
            el: "#app01",
            data: {
                link: "https://www.baidu.com",
                isActive: true
            }
        })
    </script>

二. v-on：绑定事件可以去执行相应的操作（给元素绑定事件）

(1)绑定一个事件
<div v-on:事件名："函数名"></div>

(2)绑定多个事件
<div v-on:"{事件名1：函数名，事件名2：函数名}"></div>

注意：v-on绑定单个事件可以进行简写：'@事件名'

<div id="app01">
        <!--方式一: 绑定一个事件-->
        <a v-bind:href='link'
           v-bind:class="{active: isActive}"
           v-on:click="myClick"
           >去百度</a>
        <!--方式二: 绑定多个事件-->
        <button v-on="{click: myClick,
                       mouseenter: mouseEnter,
                       mouseleave: mouseLeave}">
            点我今晚吃鸡~~~
        </button>
    </div>
    <script>
        // 绑定属性，简写冒号：
        let app01 = new Vue({
            el: "#app01",
            data: {
                link: "https://www.baidu.com",
                isActive: false
            },
            methods: {
                myClick: function () {
                    console.log("大吉大利，今晚吃鸡~~~")
                },
                mouseEnter: function () {
                    console.log("鼠标来了~~~");
                },
                mouseLeave: function () {
                    console.log("鼠标走了~~~");
                }
            }
        })
    </script>

三.v-model:将input的值和模型中的变量进行绑定，可以实现数据与视图的双向绑定

<div id="app01">
        <p>请选择你的性别</p>
        <p>
            <input type="radio" value="男" v-model="gender"/>男
            <input type="radio" value="女" v-model="gender"/>女
</p>
        <br>
        {{ gender }}
        <p>请选择你的女朋友</p>
        <select name="" id="" v-model="girlFriends">
            <option>dogfa</option>
            <option>djb</option>
            <option>oldniu</option>
        </select>
        <br>
        {{ girlFriends }}
        <p>
            <textarea v-model="article"></textarea>
        </p>
        <br>
        {{ article }}
    </div>
    <script src="./vue.js"></script>
    <script>
        let app01 = new Vue({
            el: "#app01",
            data: {
                name: "dogfa",
                gender: [],
                girlFriends: [],
                article: "这是一篇文章",
            }
        })
    </script>

四.v-once指令:可以让元素或组件只渲染一次，一旦绑定，数据就不会改变。

<div id="app">
        <h3>v-once</h3>
        <input type="text" v-model="voncetext" />
        <p>{{voncetext}}</p>
        <p v-once>{{voncetext}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                    voncetext:"测试v-once"
                }
        })