[Vue] 6.Vue常用的模板语法

最新推荐文章于 2024-05-30 14:27:51 发布

weiweicn!

最新推荐文章于 2024-05-30 14:27:51 发布

阅读量102

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u014627255/article/details/125003695

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

v-html指令：用来解析带有标签的变量，可以展示出对应的样式。

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: '<strong>hello world</strong>'
                }
            },
            template: `<div v-html="message"></div>`
        });
        const vm = app.mount('#root')
    </script>

在这里插入图片描述
2. v-bind: 用于属性和变量做绑定（可缩写为’:'）

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world'
                }
            },
            template: `<div v-bind:title="message">hello wprld</div>`
        });
        const vm = app.mount('#root')
    </script>

缩写版

 template: `<div :title="message">hello wprld</div>`

若绑定的属性名字是变量：
在这里插入图片描述

在这里插入图片描述
3. v-once: 变量只使用一次，即数据不会改变

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world'
                }
            },
            template: `<div v-once>{{message}}</div>`
        });
        const vm = app.mount('#root')
    </script>

v-if: 标签展不展示：

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world',
                    show: true
                }
            },
            template: `<div v-if="show">{{message}}</div>`
        });
        const vm = app.mount('#root')
    </script>

v-on: 做事件绑定（可缩写为@）

<script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world',
                    show: true
                }
            },
            methods: {
                handleClick() {
                    alert('click')
                }
            },
            template: `<div v-on:click="handleClick">{{message}}</div>`
        });
        const vm = app.mount('#root')
    </script>

简写版：

template: `<div @click="handleClick"></div>`

当绑定的事件是变量时：
在这里插入图片描述
完整代码，各部分替换script中的内容即可

<!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>7</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello world',
                    show: true,
                    name: 'title',
                    event: 'click'
                }
            },
            methods: {
                handleClick() {
                    alert('click')
                }
            },
            template: `<div @[event]="handleClick">{{message}}</div>`
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

weiweicn!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Vue] 6.Vue常用的模板语法

v-html指令：用来解析带有标签的变量，可以展示出对应的样式。<script> const app = Vue.createApp({ data() { return { message: '<strong>hello world</strong>' } }, templat.
复制链接

扫一扫