Vue.js中的插值(插值表达式)和使用JavaScript表达式

最新推荐文章于 2024-05-09 21:52:56 发布

执刀人的工具库

最新推荐文章于 2024-05-09 21:52:56 发布

阅读量383

点赞数

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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/winkexin/article/details/130650629

版权

技术文章专栏收录该内容

356 篇文章 16 订阅

订阅专栏

下面demo中使用 {{}} 的形式在 html 中获取实例对象对象中 data 的属性值；

这种使用 {{}} 获取值得方式，叫做插值或插值表达式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<body>

<div id="div">

{{user_name}}

</div>

</body>

// 两种引入方式，任意选择

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script src="./vue.js"></script>

<script>

var app = new Vue({

el:'#div', // 设置要操作的元素

// 要替换的额数据

data:{

user_name:'我是一个div'

}

})

</script>

数据绑定

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

1	`<span>Message: {{ msg }}</span>`

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。即便数据内容为一段 html 代码，仍然以文本内容展示

1

2

3

4

5

6

7

8

9

10

11

12

13

<body>

<div id="div">

文本插值 {{html_str}}

</div>

</body>

<script>

var app = new Vue({

el:'#div',

data:{

html_str:'<h2>Vue<h2>'

}

})

</script>

浏览器渲染结果：

1	`<div id="div">文本插值 <h2>Vue<h2></div>`

打开浏览器的控制台的REPL 环境输入 app.html_str = '<s>vue</s>'

浏览器渲染结果就会立刻发生改变： <div id="div">文本插值 <s>vue</s></div>

Vue.js使用JavaScript表达式

Vue.js 都提供了完全的 JavaScript 表达式支持，但是不能使用 JS 语句；

(表达式是运算，有结果；语句就是代码，可以没有结果)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<div id="app">

<s>{{us}}</s>

{{us>3?'大':'小'}}

{{hh()}}

{{obj.name}}

<!-- {{if(us>1){

console.log(1)

}else{

console.log(0)

}}} -->

</div>

</body>

<script>

var app = new Vue({

el:'#app',

data:{

us:1,

hh:function(){

return 4+3;

},

obj:{

name:'李四'

}

}

});

// 打印

console.log(app);

</script>

执刀人的工具库

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js中的插值(插值表达式)和使用JavaScript表达式

下面demo中使用 {{}} 的形式在 html 中获取实例对象对象中 data 的属性值；
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

执刀人的工具库 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。