Vue模版语法之绑定(示例代码)

最新推荐文章于 2024-03-15 09:36:15 发布

头发多多程序媛

最新推荐文章于 2024-03-15 09:36:15 发布

阅读量131

点赞数

分类专栏： vue 笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_46816740/article/details/108832342

版权

笔记同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue模版语法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

</head>

<body>
    <div id="demo">
        <!-- 文本 -->
        <div>{{myHtml}}</div>
        <!-- 原始Html -->
        <div v-html="myHtml"></div>
        <!-- 属性绑定 -->
        <a v-bind:href="myUrl">跳转到{{myUrl}}</a>
        <!-- 事件绑定 -->
        <div v-on:click="foo">点击更改跳转路径</div>
        <!-- JavaScript表达式 -->
        <div>{{1+1}}</div>
        <div>{{number+1}}</div>
        <div>{{flag?"正确🙆‍♂️":"错误🙅‍♂️"}}</div>
        <div v-on:click="changeFlag">点击更改flag{{flag}}</div>

    </div>
</body>
<script>
    var vm = new Vue({
        el: "#demo",
        data: {
            myHtml: "<h1>一级标题</h1>",
            myUrl: "https://baidu.com",
            number: 5,
            flag:true,
        },
        methods: {
            foo() {
                this.myUrl = "https://taobao.com";
            },
            changeFlag(){
                this.flag = !this.flag;
            },
        }
    })
</script>

</html>

最后得到绑定的示例演示
分析代码理解
在这里插入图片描述文本作对比
点击跳转则跳转点击更改则显示处更改

头发多多程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue模版语法之绑定(示例代码)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue模版语法</title> <script src="https://cdn.bootcdn.net/
复制链接

扫一扫

专栏目录