【Vue.js】实例中的数据,事件和方法(三)

1、v-text属性

实例中的数据content会完整显示

<div v-text="content"></div>

2、v-html属性

实例中的数据content,其中html标签会被转义

<div v-html="content"></div>

3、绑定函数及数据驱动

v-on: 函数绑定,可简写为@
函数中数据改变,页面会同步刷新,handleClick:function () {this.content= "world"}}
this相当于python中的self
content值改变后,页面内容会自动刷新

><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-on:click="handleClick">{{content}}</div>
        <div @click="handleClick">{{content}}</div>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                content:"hello world"
            },
            methods:{
                handleClick:function () {
                    this.content = "world"}
>            }
        })
    </script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,860评论 18 139
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,610评论 1 45
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,590评论 0 6
  • 1 小石口的山 那么高那么伟岸 山风吹开满枝的桃花杏花 还有那遍野的沙柳 迎风招展 2 千年的等待 五子登科笑落了...
    木同云阅读 520评论 0 0
  • 满眼遮天欲火林,引得游客赋诗吟。 篇篇博彩难描尽,枫叶风情咤古今。 (新韵,九文(平)
    涂糊虫阅读 880评论 12 13