vue filters中使用data中数据
vue filters中 this指向的不是vue实例，但想要获取vue实例中data中的数据，可以采用下面方法。在 beforeCreate中将vue实例赋值给全局变量app0，然后filters中即可通过app0获取data中数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Vue.js v2.6.10 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item.title | model}}</li>
</ul>
</div>
<script>
var app0;
var app = new Vue({
el: '#app',
data: function () {
return {
name: '',
shop: '',
list: [
{
title: '${name}的购物列表一,所在商城${shop}'
},
{
title: '${name}在${shop}的购物列表二'
}
]
}
},
beforeCreate: function () {
app0 = this;
},
methods: {},
mounted: function () {
this.$nextTick(function() {
setTimeout(() => {
this.name = '张三';
this.shop = '家乐福';
}, 1000)
})
},
filters: {
model: function (val) {
return val.replace(/\$\{name\}/g, app0.name).replace(/\$\{shop\}/g, app0.shop);
}
}
})
</script>
</body>
</html>
vue filters中使用data中数据的更多相关文章
- 对vue中的data进行数据初始化
this.$data:是表示当前的改变后的this中的数据 this.$options.data():是表示没有赋值前的this中的数据,表示 初始化的data 一般可以使用Object.assign ...
- 十、Vue：Vuex实现data(){}内数据多个组件间共享
一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...
- Vue beaforeCreate时获取data中的数据
异步获取即:通过 $this.$nextTick或者settimeout,这连dom都可以拿出来 beforeCreate() { this.$nextTick(function() { con ...
- wex5 如何在js中给data添加数据
var options = { defaultValues :[ {'xuetang' : xuetang,'time' : time} ] }; this.comp("xuetangDat ...
- VUE axios 发送 Form Data 格式数据请求
axios 默认是 Payload 格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换.Payload 和 Form Data 的主要设置是根据请求头的 C ...
- Vue 组件中的data数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue调用组件，组件回调给data中的数组赋值，报错Invalid prop type check failed for prop value. Expecte
报错信息: 代码信息:调用一个tree组件,选择一些信息 <componentsTree ref="typeTreeComponent" @treeCheck="t ...
- 在小程序中修改上一个页面里data中的数据调用上一个页面的方法
//获取已经打开的页面的数组 var pages = getCurrentPages(); //获取上一个页面的所有的方法和data中的数据 var lastpage = pages[pages.l ...
- ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...
随机推荐
- Docker入门级简单的操作命令
在理解 Docker 之前,首先得先区分清楚两个概念,容器和虚拟机. 虚拟机都需要有自己的操作系统,虚拟机一旦被开启,预分配给它的资源将全部被占用. 容器技术是和我们的宿主机共享硬件资源及操作系统,可 ...
- 添加新网络模型后运行报错：未定义的参数：ps_roipooling param
现象描述:在新增了具有自定义的data层或者loss层的网路之后,工程运行会报错: 疑惑:并没有这样的参数新增,并且前向的deploy文件已经将自定义的loss以及data等都去掉了: 可能的原因:虽 ...
- mac上sed -i 执行失败报错
比如说我要替换version.txt文件中的version=1.1 为version=1.2,比如test.txt文件内容如下: version=1.1 此时我们会使用sed来替换,如果是涉及比较多的 ...
- Cocos Creator （webgl模式下怎么让canvas背景透明）
项目中构建出web-mobile包后,打开main.js 在main.js中加入如下两行即可让canvas变透明 cc.director.setClearColor(new cc.Color(0,0, ...
- G面经Prepare: Longest All One Substring
give a string, all 1 or 0, we can flip a 0 to 1, find the longest 1 substring after the flipping 这是一 ...
- BigDecimal源码
1 public BigDecimal(char[] in, int offset, int len, MathContext mc) {// 使用字符数组的构造方法,一般我们推荐使用的是一Strin ...
- sklearn中报错ValueError: Expected 2D array, got 1D array instead:
from sklearn.linear_model import LinearRegression lr = LinearRegression() print(tr_x.shape,tr_y.shap ...
- HashMap 源码分析
static final int DEFAULT_INITIAL_CAPACITY = 16; 默认容量 static final int MAXIMUM_CAPACITY = 1073741824 ...
- logback 按时间和大小生成日志不生效的问题
服务器要记录所有的日志,这些日志输入到一个文件中太大了,就需要按大小和时间还分割,比如每小时产生一个文件或当文件大小大于200MB的时候生成一个文件. 第一版这样版本,但是服务器启动之后没有生成日志文 ...
- OpenCV学习笔记(二) - 写入视频、jpg格式
写入视频: import sys, os import cv2 imgDir = '/Users/xxx/salient/' videoName = 'vname' fps = 30 #帧频 outp ...