精华内容
下载资源
问答
  • Vue 字符串转Function

    千次阅读 2019-12-05 22:11:40
    #Vue 字符串转Function 方法一: eval /* 定义字符串类型方法 */ const func="(value)=>{console.log(value);return value}" /* 字符串转Function */ str_to_func(func,value){ return eval(func)(value) } /*...

    #Vue 字符串转Function
    方法一: eval

    /* 定义字符串类型方法 */
    const func="(value)=>{console.log(value);return value}"  
    
    /* 字符串转Function */
    str_to_func(func,value){
    	return eval(func)(value)
    }
    
    /* 使用 */
    str_to_func(func,1)
    

    结果是控制台输出1

    有些代码检查会报错,但是不影响使用
    ESLint: eval can be harmful. (no-eval)

    方法二: new Function

    /* 定义字符串类型方法 */
    const func = 'console.log(value);return value'
    
    /* 字符串转Function */
    str_to_func (func, value) {
      const Fn = new Function('value', func)
      return Fn(value)
    }
    
    /* 使用 */
    str_to_func(func,1)
    
    /* 也可以直接使用 */
    const func = 'console.log(value);return value'
    const Fn = new Function('value', func)
    Fn(1)
    

    结果也是控制台输出1

    但是代码检查依旧会有问题
    ESLint: The Function constructor is eval. (no-new-func)

    展开全文
  • js vue 字符串转数字 并执行算数计算

    千次阅读 2020-07-05 17:04:29
    利用js变量弱类型转换。将字符串类型转换成数字类型,并执行算术运算 var n = "1"; var str = n-0 ; //此时str已经是数字类型 str = str +1 ; //结果为 str = 2; //也可以写成 var str = n-0 +1;

    利用js变量弱类型转换。将字符串类型转换成数字类型,并执行算术运算

    var n = "1";
    var str = n-0 ; //此时str已经是数字类型
    str = str +1 ;
    //结果为 str = 2; 
    //也可以写成 var str = n-0 +1;
    
    展开全文
  • VUE 字符串拼接 各种拼接

    万次阅读 2018-04-03 15:58:40
    1. :style 同时绑定对象与属性 :style=&...2. 字符串拼接 :id="['ecahrt'+n+'-layout'+layout]" 3. 绑定数值 与字符串数值 :class="{red:changeRed==n,['layout'...

    1. :style 同时绑定对象与属性

    <div :style="{color: fontColor}"> </div>
    <div :style="fontColor=='#f00'? 'style1':'style2'"> </div>
    <div :style="[{color: fontColor}, fontColor== '#f00'? 'style1':'style2']"> </div>
    
    data(){
    	return {
    		fontColor: '#f00'
    	}
    }
    
    <style>
    .style1{
    	background: #fff;
    }
    .style2{
    	background: #0f0;
    }
    </style>
    

    2. 字符串拼接

    :class="['string'+index,'string2']"
    
    :action="path+'string'"
    
    data(){
    	return {
    		index: 10,
    		path: 'http://192.168.0.1:8080'
    	}
    }
    

    3. 绑定数值 与字符串数值 true则加载,false则忽略

    :class="{red: index==2 ,['layout'+index]:true}"
    
    展开全文
  • 本期为大家带来的Web前端学习知识是”前端开发:如何设置Vue基础指令与函数参数?“,喜欢Web前端的小伙伴,一起看看吧!1. 自定义指令除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。...

    4d08184db02f94c7ebf9e22ab9326d01.png

    大家好,我来了!本期为大家带来的Web前端学习知识是”前端开发:如何设置Vue基础指令与函数参数?“,喜欢Web前端的小伙伴,一起看看吧!

    1. 自定义指令

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

    全局指令

    3d69ef703c1df0f98d3c48da6a0ffb3b.png

    局部指令

    d6c63f1e5830d7abd1fa94d2ffa201eb.png

    钩子函数

    一个指令定义对象可以提供如下几个钩子函数 (均为可选):

    bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

    update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

    componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

    unbind:只调用一次,指令与元素解绑时调用。

    钩子函数参数

    指令钩子函数会被传入以下参数:

    el:指令所绑定的元素,可以用来直接操作 DOM。

    binding:一个对象,包含以下属性:

    name:指令名,不包括 v- 前缀。

    value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。

    oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

    expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。

    arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。

    modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。

    vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

    oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

    动态指令参数

    0ae55dccef6421772b170c304f1b2553.png

    2.渲染函数 & JSX

    Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。

    3.过滤器

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示

    4.全局过滤器

    aca022b8a172588db911b9befaa168f2.png

    5.局部过滤器

    b7226e2fa488ad88dea7ae041d232610.png

    6.第三方插件

    插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:

    添加全局方法或者属性。如: vue-custom-element

    添加全局资源:指令/过滤器/过渡等。如 vue-touch

    通过全局混入来添加一些组件选项。如 vue-router

    添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。

    一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

    Vue-Awesome-Swiper(Swiper)

    Github地址:https://github.com/surmon-china/vue-awesome-swiper

    官网:https://www.swiper.com.cn/

    1. 安装:npm install vue-awesome-swiper –save
    2. 全局引用

    75a9357c3b9363265d97f68e673d0bad.png

    3. 局部引用

    324b8f7d83e3c1bea6bc6fc8d361561a.png

    4. 三种加载方式

    4ec567e9215c587f7aee1dd6ba2a3e79.png

    5. SPA使用

    422c7426752d9acb8e5dfc068236c8f1.png

    本期为大家带来的Web前端学习知识”前端开发:如何设置Vue基础指令与函数参数?“介绍完了,想了解更多精彩内容的小伙伴,关注我,我们下期再见!

    展开全文
  • 项目中遇到需要执行后台返回的js字符串函数可以使用eval()方法进行解析运行 <template> </template> <script> export default{ data(){ return{ fun:'(function(){if(_this.planObj....
  • vue字符串转html方法

    千次阅读 2018-08-31 15:49:30
    开发vue时在{{mo.infoName | subopt}} Vue.filter(“subopt”, function…)时发现过滤处理后返回来的始终是字符串,当对展现文本有页面样式或拍板格式要求时,无法满足。 于是乎我们采用&lt;div v-html="...
  • 页面常规绑定函数 <div class=...字符串模板绑定函数 `<div class="digCommentReplyreplay" οnclick="showReplyinputfn(${datas[f].c_fid},${datas[f].id},2,${kk})"></div>` JS的函数
  • <script> import Icon from "./icon"; export default { data() { return { text:"1234[微笑]5678[哭泣]", iconList: [{name:"[微笑]",url:"http://xxx"},{... render: function(createElement) { let .
  • Vue字符串padStart和padEnd方法

    千次阅读 2018-08-14 19:07:29
    ES2017 引入了字符串补全长度的函数。如果某个字符串的长度不够指定的长度,会在头部或尾部补全。 padStart()用于头部补全,padEnd()用于尾部补全。 'a'.padStart(3, '0') // '00a' 'x'.padEnd(5, 'ab') // '...
  • VUE----将字符串变成函数来执行

    千次阅读 2020-10-23 09:44:08
    重点:[1]constmethods=this.$options.methods //获取本组件下的所有method [2]methods[item.methodName].call(this,item)//使用this.$options.methods会有this指向问题 <script> import _ from 'lodash' ...
  • vue字符串拼接添加点击事件

    千次阅读 2020-07-06 16:59:57
    button class="el-button el-button--small" οnclick="onSubmit()">主要按钮<...在methods中添加onSubmit函数不起作用,应该在下面直接写 window.onSubmit =function(){ console.log(123) }
  • <div class="face"> <p> ,2444876234&fm=26&gp=0.jpg" @click="fileSelect()" id="testimg" /> </p> ()" style="display:none;" /> </div> fileSelect() { document.... // 文件bai选择后触du发次zhi函数dao }
  • (\d+)\]/g, '') }) this.commentList = res.list }) } } --- 补充 --- 其中 .replace() 方法的第二个参数也支持使用函数返回,即能实现更复杂的替换,如: item.Content = item.Content.replace(/\[(.+)\]/g, ...
  • Vue.js中的图片引用路径的方式:第一种:按照正常HTML语法引用路径 export default {name: 'App',data () {return {}}}第二种:使用import方式 import logoSrc from './assets/logo.png'export default {name: 'App',...
  • vue字符串操作

    2021-09-09 23:25:00
    获取字符串长度:字符串.length 字符串截取:字符串.substring(0,1) 方法名全部小写, 包前不包后,从0开始 字符串转数字: 字符串 - 0 必须是 - 0, 减其他数字都无法实现字符串转number
  • \ n项目名称: vue显示内容格式化1, 项目进度必填;\ n项目名称: vue显示内容格式化2, 项目进度必填;\ n项目名称: vue显示内容格式化3, 项目进度必填;\ n项目名称: vue显示内容格式化4, 项目进度必填;\ n...
  • vue 2.5.14以上版本render函数不再支持直接返回字符串,必须返回数组或vnode节点,如果返回字符串的话,渲染为空。详情可见源码。 function createFunctionalComponent ( Ctor, propsData, data, ...
  • 之前在看vue的源码的时候,发现一个渲染函数的方法: new Function(‘width:’+字符串); 目前在项目中也尝试此方法,...baseInfo.site_code是函数方法内容的字符串。 例如: new Function(‘width:alert(666)’)();
  • VUE的两个版本VUE分为完整版(vue.js)和非完整版(vue.runtime.js)二者的区别在于完整版的VUEvue.js)会包含一个编译器,由于这个编译器的存在,完整版VUEvue.js)的体积会比非完整版VUEvue.runtime.js)大...
  • vue逆转字符串

    2019-02-11 17:04:39
    Vue.js var app5 = new Vue({ el: ‘#app-5’, data: { message: ‘Hello Vue.js!’ }, methods: { reverseMessage: function () { this.message = this.message.split(’’).reverse().joi...
  • strcmp() 用来比较字符串(区分大小写),其原型为: 定义函数 int strcmp(const char *s1, const char *s2); 头文件:#include <string.h> 返回值:若参数s1 和s2 字符串相同则返回0。s1 若大于s2 则返回...
  • 字符串模板:在js字符串中定义的模板。 2、Props属性:HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名): (1...
  • 最近在读 Vue 源码,遇到了 cached 方法:function 乍一看,就是一个高阶函数而已。但是仔细揣摩,方才发现尤大的用意,顿觉精妙。高阶函数,简单的说一般都是一个函数,参数是函数,返回值也是函数。一般都用到了...
  • Vue3结合Ant Design Vue封装字符串截取组件整体环境代码 整体环境 Vue3 + TypeScript Ant Design Vue 2.x 代码 props中的value和length不用再setup函数中return,可以直接再template 中使用 <template> <...
  • 这个报错说的是我的变量goodPrice本身期望是个Number类型的,但是实际上是一个字符串类型的,所以报错了。 而仔细检查后台代码 错误就在这里。 我为了让商品总金额显示时保留2位小数,使用了toFixed()函数,而toFix...
  • vue分割字符串并循环

    2020-12-16 11:29:46
    props.item.plate是一个字符串,后面要加上||''才能使用split函数进行分割
  • Vue的渲染函数

    2020-06-27 17:43:16
    vue中,我们可以通过三种方法来创建...template 的值是字符串—— html 形式的字符串,其编译过程与 el 相同; render 的值是一个函数,该函数的返回值是一个通过 createElement(...) 创建的虚拟DOM; 三者中的两者或
  • 终于搞懂了vue 的 render 函数(一) -_-|||

    万次阅读 多人点赞 2018-10-11 20:32:18
    文章目录render 函数作用render 函数讲解render 函数的返回值...vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了。建议配合文档阅读,本文也是根据文档加上自己的理解。 注:本文代码都是在单文件组件中...
  • vue生命周期函数

    2020-06-13 09:01:40
    vue生命周期函数是指当一个vue实例被创建的时候,在vue实例生存的不同阶段会调用不同的生命周期函数。 下面是vue生命周期函数的官方图 生命周期函数描述 函数名称 介绍 场景 beforeCreate vue实例的...
  • Vue生命周期函数

    万次阅读 多人点赞 2018-08-11 18:35:49
    2、刚初始化一个空的Vue实例对象,此时,在这个对象上,只有一些默认的生命周期函数和默认的事件,其他的都未创建 3、beforeCreate生命周期函数执行时,data和methods中的数据和方法都还没有初始化 4、初始化data...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,690
精华内容 21,876
关键字:

vue字符串转函数

vue 订阅