vue.js实现插入数值与表达式的方法分析
本文实例讲述了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程序设计有所帮助。
相关推荐
-
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc"> <!-- ... --> </div> </template> <script>
-
Vue 进阶教程之v-model详解
Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model改进的地方,然后穿插的再说点 Vue 的小知识. 在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angular 是 Vue 早期开发的灵感来源.然而,Augular 中存在许多问题,在 Vue 中已经得到解决. v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但
-
Vue.js每天必学之Class与样式绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 尽管可以用 Mustache 标签绑定 class,比如 `{% raw %}class="{{ className }}"
-
vue模板语法-插值详解
1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使
-
vue 插值 v-once,v-text, v-html详解
引入Vue.js ,通过script形式,vue官网语法记录 创建vue应用,数据和 DOM 已经被建立了关联,所有东西都是响应式的 1:插值 缺点:让你的网速慢,或者数据加载失败时,会在浏览器中直接渲染插值[js禁用,javascript报错也会导致这个问题] html: <section id="content"> <p id="Mustache">没有v-once, {{msg}}</p> </section>
-
vue如何引用其他组件(css和js)
1.vuejs组件之间的调用components 注意:报错Do not use built-in or reserved HTML elements as component id: 修改组件的名字,例如不能使用address为组件名字 组件名字不要使用内置的或保留HTML元素为组件id, App.vue是一个入口,vue必须注册才能使用 2.vue引入外部的css,放在和引入vue的位置一样 ./代表当前项目,../代表上一级项目 import '../static/style/reset.
-
Vue中v-show添加表达式的问题(判断是否显示)
一.需求场景 1.先来说说我的需求,有数据来源和标签类型两行选项,如下图所示: 2.根据需求,我需要在点击上面的某个数据来源的时候,下面的标签类型自动切换, 需求说明如下: 3.一开始 是想写死的,就是把各种情况写死在页面上,后来查看官方文档一会,数据来源的集合可以这样写,id为各个类型的标识,name为名称,mark为点击某个数据来源 的时候标签类型根据当前点击的数据来源进行判断切换.如下图: infoTypeList: [ { id: 11, name: '新闻', mark: 'news'
-
Vue.js常用指令汇总(v-if、v-for等)
有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu
-
web前端vue实现插值文本和输出原始html
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在vue里最常见的数据绑定是使用"Mustache"语法 (双大括号) 的文本插值: <span>Message: {{ value }}</span> // 插值文本 无论何时,绑定的数据对象上 value 属性发生了改变,页面上都会响应的做出重新渲染
-
vue.js实现插入数值与表达式的方法分析
本文实例讲述了vue.js实现插入数值与表达式的方法.分享给大家供大家参考,具体如下: vue.js在插入数值的时候有三种方式 1.插入纯文本 插入纯文本是最简单的方式,使用双大括号就能插入想要的值. <span>{{ msg }}</span> mustache也可以在属性中使用 <div id="item-{{ id }}"></div> 就能显示所需要显示的文本信息了.但是有时候,我们想要插入的html文本,这时候要怎么办呢?在插入
-
vue.js前端网页弹框异步行为示例分析
目录 1. 序 2. 找两个弹框组件看看 3. 自己肝一个 3.1. 封装 Promise 3.2. 确定时允许异步等待 3.3. 细节完善 3.4. 改革 1. 序 网页弹框是个很常见的功能,比如需要告知用户消息的时候 (Alert),需要用户进行确认的时候 (Confirm),需要用户补充一点信息的时候 (Prompt) -- 甚至可以弹框让用户填写表单 (Modal Dialog). 弹框之后,开发者需要知道这个弹框是什么时候关闭以便进行接下来的操作. 在比较古老的 UI 组件中,这个事情
-
Vue.js Ajax动态参数与列表显示实现方法
Vue.js简介 vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.动态参数显示 ajax异步请求后,接收到返回的data参数并显示在前端 1.1 引入js,也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript&
-
利用vue.js实现被选中状态的改变方法
在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中.而使用vue之后,已经能够实现页面根据数据的多少动态生成.而且代码量也大幅度减少. html部分的代码: <div data-role="page " class="page "> <div class="center " id="app"> &
-
vue.js获得当前元素的文字信息方法
1.获得当前点击的内容 <li @click="problem1"> 1. <span class="blue">关于公众号使用问题</span> <img src="../img/right.png" alt=""/> </li> 当我点击这个li标签的时候,我想要获得span里面的文字,可以使用这个方法: problem1: function(e){ consol
-
Vue.js 动态为img的src赋值方法
需求是这样: ajax获取数据如下 { "code": "200", "data": { "SumAmount": 200, "List": [{ "amount": 100, "sex": "male", "fee": 1, "id": 98, "status": 2, "ti
-
vue.js中ref及$refs的使用方法解析
关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的: ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件: vue.js中文社区文档上的说明已经就比较通俗易懂了,其实我们可以这么理解,ref和$refs其实就是用来获取/操作DOM元素的:类似于jquey中的$(".xxx
-
vue.js中proxyTable 转发请求的实现方法
找到config/index.js 配置文件 proxyTable: { '/api': { target: 'http://your_website', changeOrigin: true, pathRewrite: { //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段 '^/api': '' } } } 以上这篇vue.js中proxyTable 转发请求的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
在Vue.js中加载字体的正确方法
添加字体不应该对性能产生负面影响.在本文中,我们将探讨在 Vue 应用程序中加载字体的最佳实践. 正确声明 font-face 的字体 确保正确声明字体是加载字体的重要方面.这是通过使用 font-face 属性来声明你选择的字体来实现的.在你的 Vue 项目中,这个声明可以在你的根 CSS 文件中完成.在进入这个问题之前,我们先来看看 Vue 应用的结构. /root public/ fonts/ Roboto/ Roboto-Regular.woff2 Roboto-Regular.woff
-
Vue.js响应式数据的简单实现方法(一看就会)
目录 引言 基本概念 副作用函数 响应式数据 响应式数据的基本实现 实现思路 初步实现尝试 完善响应系统 泛化副作用函数名 修复漏洞 总结 引言 在Vue.js之中,Vue会自动跟踪JavaScript状态变化并在状态发生改变时响应式地更新DOM,这就是Vue.js的两大核心功能之一——响应性,是每一个Vue.js框架使用者必须熟练掌握的的功能.而得益于Vue.js自身支持的声明式渲染,Vue.js的学习成本大大降低,就算是一个前端领域的小白,只要能看懂并简单使用基本的HTML.JavaScri
随机推荐
- ExtJS 学习专题(一) 如何应用ExtJS(附实例)
- 伪静态下不能使用FCKeditor的解决方法
- Windows2008初次体验的几个心得图文
- IIS 配置过程及解决方案 学习小结
- js获取元素在浏览器中的绝对位置
- 详解php比较操作符的安全问题
- destoon后台网站设置变成空白的解决方法
- ThinkPHP中Common/common.php文件常用函数功能分析
- Python编码爬坑指南(必看)
- 在Python的Flask框架中使用日期和时间的教程
- BootStrap创建响应式导航条实例代码
- 介绍Python中内置的itertools模块
- shell中的各种括号的使用方法
- C++常对象精讲_const关键字的用法
- Linux系统下MongoDB的简单安装与基本操作
- oracle中left join和right join的区别浅谈
- jQuery层次选择器用法示例
- jquery结合html实现中英文页面切换
- Javascript别踩白块儿(钢琴块儿)小游戏实现代码
- IE和firefox浏览器的event事件兼容性汇总