Vue——模板语法

最新推荐文章于 2024-06-15 14:41:39 发布

33的史努比

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量41

点赞数

分类专栏：前端入门学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/coising/article/details/123146008

版权

前端入门学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

mustach语法

<!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>Document</title>
</head>
<body>

    <div id="app">
        {{message}}
        <!-- 可写表达式 -->
        <h2>{{firstName + ' ' + lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{counter *2}}</h2>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data : {
                message : 'nihaoya',
                firstName : 'xx',
                lastName : 'rr',
                counter : 100
            }
            
        })
    </script>
</body>
</html>

v-once

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
v-for后可跟=‘’

v-bind

<!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>Document</title>
</head>
<body>

    <div id="app" v-cloak>
        
        <img v-bind:src="imgURL" alt="">
        <a v-bind:href="aHref">baidu</a>
        
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data : {
                message : 'nihaogggya',
                imgURL : 'https://img-blog.csdnimg.cn/img_convert/beaa962e9b672b68543f79aed0e20651.png',
                aHref: 'http://www.baidu.com'
            }
            
        })
    </script>
</body>
</html>

v-bind语法糖

<img :src="imgURL" alt="">

v-bind 动态绑定class

<!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>Document</title>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>

    <div id="app" v-cloak>
        
        <h2 v-bind:class="{active: isActive, line : isLine}">{{message}}</h2>
        <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>


        <button v-on:click="btnClick">按钮</button>
        
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data : {
                message : 'nihaogggya',
                isActive : true,
                isLine: true
            },
            methods: {
                btnClick : function () {  
                    this.isActive = !this.isActive
                }
            }
            
        })
    </script>
</body>
</html>

按钮

监听事件

v-bind 数组语法

<!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>Document</title>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>

    <div id="app">
        
        <h2 class="title"  :class="getClasses()">{{message}}</h2>
        <button v-on:click="btnClick">按钮</button>
        
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data : {
                message : 'nihaogggya',
                active :'aaa',
                line : 'vvvv'
            },
            methods: {
                getClasses: function () {  
                    return [this.active,this.line]
                }

                
            }
            
        })
    </script>
</body>
</html>

33的史努比

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——模板语法

mustach语法<!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"> <ti
复制链接

扫一扫