Vue指令

最新推荐文章于 2024-08-24 11:40:03 发布

m0_60932676

最新推荐文章于 2024-08-24 11:40:03 发布

阅读量355

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_60932676/article/details/121845569

版权

1.v-text以及v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wyb</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-text="message"></p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"前端",
},
});
</script>
</body>
</html>


<body>
<div id="app">
<p v-html="message"></p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"<a href='javascript:;'>前端</a>",
},
});
</script>
</body>

v-text和v-html作用一样，都是改变文本，最大区别在于若信息包含标签，html会解析该标签;text只会原封不动显示出来。

2.v-on


<body>
<div id="app">
<input type="button" value="按钮" v-on:click="change"/>
<p v-text="message"></p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"前端",
},
        methods:{
        change:function(){
            this.message="前端最棒！";
},
},
});
</script>
</body>

v-on为标签绑定事件语法是v-on:事件="函数名"，同时也可以简写为@事件="函数名"。

3.v-show和v-if

<div id="img">
        <p v-show="isshow">zxy is well</p>
        <p v-if="isshow">wyb is well</p>
        <input type="button" @click="change" value="按钮切换状态">
        <h2 v-if="temputer>40">热死了</h2>
    </div>
    <script>
        var change = new Vue({
            el:"#img",
            data:{
                isshow:true,
                temputer:41,
            },
            methods:{
                change:function(){
                    this.isshow=!this.isshow;
                },
            },
        });
    </script>

v-show和v-if都是管理显示问题，但是v-show只是改变元素的display属性值，而v-if是将整个元素进行删除和添加。所以，往往采用v-show，这样代码运行效率更高，更不费空间。

4.v-bind

<div id="bind">
        <img v-bind:src="issrc" alt="" v-bind:title="istitle">
        <img :src="issrc" alt="" :title="istitle" @click="isActive" :class="isactive?'active':''">
        <img :src="issrc" alt="" :title="istitle" @click="isActive" :class="{active:isactive}">
    </div>
    <script>
        var bind = new Vue({
            el:"#bind",
            data:{
                isactive:false,
                issrc:"./img/qt_4ed26836c4d25ec793e0cb8adecb619f_59589.jpg",
                istitle:"前端",
            },
            methods:{
                isActive:function(){
                    this.isactive=!this.isactive;
                },
            },
        });
    </script>

v-bind的作用就是对标签属性值进行修改

5.v-for

<div id="for">
        <input type="button" value="添加菜品" @click="push">
        <input type="button" value="删除菜品" @click="dele">
        <ul>
            <li v-for="(item,index) in arry">
                {{ index+1 }}成都区县：{{ item }}
            </li>
        </ul>
        <ul>
            <li v-for="item in vegetable">
                {{ item.name }}
            </li>
        </ul>
    </div>
    <script>
        var For = new Vue({
            el:"#for",
            data:{
                arry:["青羊","金牛","青白江","武侯"],
                vegetable:[
                {name:"番茄炒蛋"},
                {name:"烂肉粉丝"},
                {name:"清汤圆子"}],
            },
            methods:{
                push:function(){
                    this.vegetable.push({name:"红烧狮子头"});
                },
                dele:function(){
                    this.vegetable.shift();
                },
            },
        });
    </script>

v-for循环遍历对象

6.v-model

<div id="form">
        <input type="button" value="点击改变message值" @click="change">
        <input type="text" v-model="message">
        <h2>{{ message }}</h2>
    </div>
    <script>
        var model = new Vue({
            el:"#form",
            data:{
                message:"前端",
            },
            methods:{
                change:function(){
                    this.message = "前端最棒！";
                },
                
            },
        });
    </script>

v-model获取表单元素的值，并且是双向数据绑定，也就是改表单的值和获取的值实时改变，改获取的值，表单的值改变。

m0_60932676

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令

1.v-text以及v-html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫