欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue.js实现插入数值与表达式的方法分析

程序员文章站 2024-01-01 20:13:58
本文实例讲述了vue.js实现插入数值与表达式的方法。分享给大家供大家参考,具体如下: vue.js在插入数值的时候有三种方式 1、插入纯文本 插入纯文本是最简单的方...

本文实例讲述了vue.js实现插入数值与表达式的方法。分享给大家供大家参考,具体如下:

vue.js在插入数值的时候有三种方式

1、插入纯文本

插入纯文本是最简单的方式,使用双大括号就能插入想要的值。

<span>{{ msg }}</span>

mustache也可以在属性中使用

<div id="item-{{ id }}"></div>

就能显示所需要显示的文本信息了。但是有时候,我们想要插入的html文本,这时候要怎么办呢?在插入html的时候有两种方式,一种是用三个大括号的形式,这种是在vue.js 1.x 版本时候使用较多,但是在vue.js 2.x 的时候,插入纯文本的时候开始使用v-html的形式。

2、插入html

<span>{{{ msg }}}</span> // vue.js 1.x 版本
<div v-html="msg"></div> // vue.js 2.x版本

被插入的内容都会被当做 html —— 数据绑定会被忽略。注意,你不能使用 v-html 来复合局部模板,因为 vue 不是基于字符串的模板引擎。组件更适合担任 ui 重用与复合的基本单元。此外不建议将用户输入的值直接作为html显示,这样有可能会造成xss攻击。对用用户输入显示的值一定要做必要的过滤之后才能真正显示。

3、属性

对于双大括号,不能在html属性中使用,对于属性,使用v-bind 来绑定数据。

<div v-bind:id="dynamicid"></div>
<div :id="dynamicid"></div> // 简写形式

附:vue.js插值与表达式示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>document</title>
  <!-- vue.js -->
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <!--# 使用大括号(mustache 语法) “{{ }}”是最基本的文本插值方法,它会自动将我们双向绑定的诗句实时显示出来 #-->
  {{ book }}
</div>
</body>
</html>
<script>
  var mydata = {
    book:'《vue.js实战》'
  };
  var app = new vue({
    el:'#app',
    data:mydata
  })
</script>

希望本文所述对大家vue.js程序设计有所帮助。

上一篇:

下一篇: