精华内容
下载资源
问答
  • 需求:动态拼接元素并实现换行 如图: 要点:主要是通过<pre>标签,通过"\n"实现换行; {label: "使用情况", prop: "useInfo", formatter: row => { let useInfo = row.useInfo; let info = ""; ...

    需求:动态拼接元素并实现换行

    如图:

    要点:主要是通过<pre>标签,通过"\n"实现换行;

    {label: "使用情况", prop: "useInfo", formatter: row => {
                  let useInfo = row.useInfo;
                  let info = "";
                  if (useInfo != null && useInfo.length > 0){
                    let index = 1;
                    useInfo.forEach(item=>{
                      info += (index++) + "、" + item.name+"(ID:"+item.id+")\n";
                      info += "当天:"+(item.day ? item.day : 0) +"次;";
                      info += "当月:"+(item.month ? item.month : 0)+"次;";
                      info += "累计:"+(item.all ? item.all : 0)+"次;";
                      info += "\n";
                    }
                  )
    
                  return (<el-tooltip effect="dark"  placement="left-start">
                          <p><span>使用详情</span> <i class="el-icon-info" /></p>
                          <div slot="content" style="line-height: 20px;">
                          <pre>{info}</pre>
                          </div>
                  </el-tooltip>);
    
                  }
                  return "";
                }
              }

    吐槽……

    通过不适用<pre>标签,直接<br/>换行,直接就给当成字符串输出了…………尝试各种方法,最终用上面的实现

    展开全文
  • vue如何操作html模版,使页面样式发生改变vue可以是使用两种方法使页面发生改变1. 动态改变class 使class增加、删除达到页面的改变2. 动态的操作style内联样式------------------------ 动态class------------------...

    vue如何操作html模版,使页面样式发生改变

    vue可以是使用两种方法使页面发生改变

    1. 动态改变class 使class增加、删除达到页面的改变

    2. 动态的操作style内联样式

    ------------------------ 动态class-----------------------------

    显示或者隐藏

    需求1. 点击图片使isCircle取反

    需要2. 如果isCircle使false,就没有circle这个class

    动态样式添加

    .shape{

    height: 100px;

    width: 100px;

    background-color: gray;

    display: inline-block;

    margin: 10px;

    }

    .circle{

    border-radius: 50%;

    }

    .blue{

    background-color: blue;

    }

    {{ isCircle }}

    new Vue({

    el: "#app",

    data: {

    isCircle: false,

    }

    })

    v-bind:class 和 v-bind:style 由vue经过特殊处理,可以在后面写对象,对象中的键为属性,值为false则隐藏该属性,值为true为显示该属性

    :class 可以绑定多个类

    问题: 写多了class的html模版会使可读性很差

    解决: 我们可以把它定义在js下,但不能定义在data下,因为在data里不能获取data的数据(底层还没有绑定上),所以我们把它定义在计算属性下

    {{ isCircle }}

    new Vue({

    el: "#app",

    data: {

    isCircle: false,

    },

    computed: {

    divClass: function() {

    return {

    circle: this.isCircle,

    blue: !this.isCircle,

    }

    }

    }

    })

    当它被点击发生true的东西,计算属性检测到它依赖的东西在发生改变,所有返回一个新的对象。

    改变类名

    .shape{

    height: 100px;

    width: 100px;

    background-color: gray;

    display: inline-block;

    margin: 10px;

    }

    .circle{

    border-radius: 50%;

    }

    .blue{

    background-color: blue;

    }

    .red{

    background-color: red;

    }

    {{ isCircle }}

    new Vue({

    el: "#app",

    data: {

    isCircle: false,

    color: "blue"

    },

    computed: {

    divClass: function() {

    return {

    circle: this.isCircle,

    blue: !this.isCircle,

    }

    }

    }

    })

    在div上绑定data的color属性,color属性的值为blue,所有class = blue这个类;

    我们添加一个input框,使v-model双向绑定data的color属性,所以当color属性改为red使,div的class也成red类

    有多个class类可以写成数组

    使用input来改动class类,使用点击来隐藏或显示类

    new Vue({

    el: "#app",

    data: {

    isCircle: false,

    color: "blue"

    },

    })

    --------------------------动态style-------------------------

    使用v-bind绑定style样式

    style样式是对象形式,但不能在属性中包含中划线,我们可以把它写成字符串或者驼峰式

    对象后面绑定的是data里的color的数据

    new Vue({

    el: "#app",

    data: {

    color: "blue"

    },

    })

    双向数据绑定,改变color值

    可以直接在input框中输入想要的值

    多个style属性

    new Vue({

    el: "#app",

    data: {

    isCircle: false,

    color: "blue",

    width: 200,

    },

    })

    问题: 有冗余,可读性不高

    解决方式: 使用计算属性

    new Vue({

    el: "#app",

    data: {

    isCircle: false,

    color: "blue",

    width: 200,

    },

    computed: {

    divStyle: function() {

    return {

    backgroundColor: this.color,

    width: this.width + 'px'

    }

    }

    }

    })

    混合多个样式

    data: {

    isCircle: false,

    color: "blue",

    width: 200,

    height: 50,

    },

    展开全文
  • VUE开发常用知识A:Vue (读音 /vjuː/,类似于view)作者:尤雨溪(EvanYou) 中国人是一套用于构建用户界面的渐进式框架。学习使用之前须掌握 HTML、CSS 和 JavaScript 等知识。B:VUE优点:小而简单,轻量级框架,上手...
    VUE开发常用知识

    757ae2d244481508ccd99a3c7d25e896.png 

    A:

    Vue (读音 /vjuː/,类似于 view)

    作者:尤雨溪(EvanYou)  中国人

    是一套用于构建用户界面的渐进式框架。

    学习使用之前须掌握 HTMLCSS JavaScript 等知识。

    B:

    VUE优点:

    小而简单,轻量级框架,上手容易,简单易学,便于与第三方库或既有项目整合

    只关注视图层, 采用自底向上增量开发的设计

    它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

    当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    Vue封装了大量的组件,可以直接使用,简便快捷

    vue的基本指令一数据渲染

    1.标签内容使用双大括号法{{数据}} 如:

    {{ message }}

    2. v-html指令:属性绑定,数据内可加标签会解析成html结构

    二条件指令

    1.  v-if切换元素隐藏和显示

      当指令值为true元素显示

      当指令值为false元素隐藏

      同时vue还提供了v-else  v-else-if 

    2.  v-show切换元素隐藏和显示;

      当指令值为true元素显示

      当指令值为false元素隐藏

    v-ifv-show的区别:

      共同点:都是动态显示DOM元素

      不同点:v-if是对节点的删除和添加

          v-show是元素display属性值noneblock的切换

    使用场景

       v-if 是动态的向DOM树内添加或删除DOM元素

       v-if 切换一个局部编译/卸载的过程,切换时合适销毁和重建内部事件监听和子组件

       v-if是懒惰性的,初始条件 = false,什么也不做,只有在条件第一次 = true时,才开始局部编译

       v-show 是在任何条件下(首次条件是否为着真)都会被编译,然后缓存,而且DOM元素保留

       v-if有更高的切换消耗

       v-if 适合运营条件不大可能改变

       v-show有更高的初始化渲染消耗

       v-show只是简单的基于css切换

       v-show是通过设置DOM元素display实现控制显隐的

       v-show 适合频繁切换

    循环指令:v-for

     值是一个数组 (item,index) in 数组名

        item是当前项值,index为当前项下标

       值是一个对象  (value,key) in 对象名       

              value是属性值,key是属性

      v-forkey的使用注意事项:

                             v-for 循环的时候,key属性只能使用 number string,且是唯一

                             key在使用的时候,必须使用 v-bind 属性绑定的形式,指定key的值

    动态绑定指令v-bind

    1属性绑定:

    一般属性都可以实现动态切换绑定值,值为字符串类型

    10ab5a115d211aa3b8956f22f481aea9.png

    bfa89d98a1857a772356d5b18a0dd5d0.png

    2class绑定

    我们可以传给 v-bind:class一个动态值,以动态地切换 class类名

    值类型为字符串、数组、对象

    b30894c853e8fd78be129e1e4970c573.png

    68c769ec8553c74f66707863d3edbab8.png

                 渲染结果:

    0f71f3ad37afc59210b5de1fbf1fcb50.png

          动态绑定class可与class属性共存:

    0a12310510410ad9d142ce9e0c73a6e9.png

      class属性能共存外,其它属性共存一律忽视原生属性

    3style绑定:

    我们可以传给 v-bind:style一个动态的样式属性值,以动态地切换样式的不同值;

    值类型为字符串、数组、对象

    81d16abca6a5016bc9e61997b59e3a7c.png

    33b56c4b758676694bebb309d5a2d888.png

    渲染结果:

    2db8628f2e3a647584a3e1b88da14a88.png

       注意:class绑定和style绑定,可直接绑定到一对象通常更好,这会让模板更清晰:

    642b3fcef053b6a8c939375fcc0e4d0a.png

    ceb2e4f108e635bdebc50e34fcadd9bf.png

    81d16abca6a5016bc9e61997b59e3a7c.png

    33b56c4b758676694bebb309d5a2d888.png

    渲染结果:

    2db8628f2e3a647584a3e1b88da14a88.png

        注意:class绑定和style绑定,可直接绑定到一对象通常更好,这会让模板更清晰:

    642b3fcef053b6a8c939375fcc0e4d0a.png

    ceb2e4f108e635bdebc50e34fcadd9bf.png

    v-bind语法可以简写为冒号  v-bind:class  ==  :class

    数据双向绑定v-model

    v-model实现数据双向绑定,一般用于表单元素

            文本框中的文本都是字符串,v-model中的值相同:

    35cb9b908836a4451e5461c1390c0011.png

    上述中用户输入信息可以动态绑定到msg所劫持的数据

    文本框、文本域、单选框、下拉菜单中 v-model绑定的值value

            复选框 v-model绑定的值是boolean

    修饰符:在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步。

     .lazy 修饰符 input 事件转变 change 事件进行同步

    ba82b1f4cce6ded442cfb36abd67b67d.png

     .number修饰符:用户输入强制转换为number类型:

    56012f2a57f569987843af3d9e1ec13a.png

    .trim修饰符:自动过滤用户输入的首尾空白字符

    3d6c0a4757a0fbf1772f58db66ec215f.png 

    事件绑定指令:v-on

    7da1228a44ea9b67bdf5cae19e2cce57.png

    支持所有原生事件,调用函数方法,第一个参数为实际参数,第二个为参数为事件对象(事件对象必须为$event关键字)

    函数方法写在VUE实例对象methods属性中

    事件指令v-on 可简写为@符号:

    ea814a210fe4a7fd99b79ee165674ee8.png

    事件修饰符:

    .stop 阻止冒泡

    .prevent 阻止默认事件

    .capture 使用事件捕获模式

    .self 只在当前元素本身触发

    .once 只触发一次

    .passive跳过默认事件的检查,提升性能,特别针对屏幕滑动行为

    ea814a210fe4a7fd99b79ee165674ee8.png

    按键修饰符:

    .enter  .tab .delete .esc .space .up .down .left .right

    a1d6a558bc6a7640f980c6981cd25ffa.png

    系统修饰符:

    .ctrl .alt .shift .meta

    62c9a2535cbb8d01f840269d1b893a48.png 

    vue事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on有几个好处:

    1扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

    2无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

    3当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。

    以上为vue开发中使用到的一些基本用法

    作者介绍

    a4080328907fe82fa17af5ebf681f40b.png

    展开全文
  • html 拼接html2 += "<span>"+card_txt2+":<input class=\"form-control time-s\" onclick='showCurDate()' id=\"user_key_id"+k+"\" name='time_1' value="+this.time+"></span>"; vue中:...
    
    html 拼接的
    
     html2 += "<span>"+card_txt2+":<input  class=\"form-control time-s\" onclick='showCurDate()'  id=\"user_key_id"+k+"\" name='time_1' value="+this.time+"></span>";
    
    vue中:
    methods:{
    	showCurDate(){
    		console.log('123')
    	},
    }
    
    
    连接两者,使页面能够加载该方法
    
    created(){
         console.log('created')
         let _this = this
         window.showCurDate= _this.showCurDate;
    },
    
    
    activated(){
         console.log('activated')
         let _this = this
          window.showCurDate= _this.showCurDate;
    },

     

    展开全文
  • let infoWindow = “<div onClick = 'goDetail()'>查看详情</div>” methods:{ goDetail(){ console.log('xiangqing') }, } 连接两者: created(){ let _this = this window.goDetail=_this....},
  • vue.js 循环动态拼接id

    千次阅读 2019-01-24 10:05:56
    静态html,调用一个gernerateId的方法  js 部分,在methods中定义这个方法,动态拼接id  
  • vue的v-for中需要动态拼接字符串: "'字符串'+xx" 下面为实例:
  • 本篇文章给大家带来的内容是关于vue $refs中不使用拼接的原因以及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 <li class="audio-item media" v-if="item.type == 3" @click=...
  • html中标签·属性值的拼接 <van-field v-model="value" :placeholder="'请输入' + title" :clearable="true" /> js代码 data() { return { title: this.$route.query.sort, value: '', }; }...
  • vue中class动态绑定值拼接字符串

    千次阅读 2019-09-26 06:13:56
    :class="`字符串${index}`" 转载于:https://www.cnblogs.com/huanhuan55/p/11359426.html
  • 注意点: 1.href前面要加“:” 2.字符串要用单引号“ ’ ”包住 3.句尾要加“.html
  • jq动态拼接html,不用任何模板渲染,

    千次阅读 2019-07-12 11:27:11
    当页面需要循环一个数组,然而你没有使用像vue v-for这样的循环的时候,也没有用其他模板喜渲染。直接举个例子 jq的方法 静态页面 <!DOCTYPE html> <... ...动态拼接html</title> </head>...
  • 今天在使用vue的过程中碰到这样一个问题,先看如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta ...
  • 1. title定义和基础用法: title 属性规定关于元素的额外信息。 这些信息通常会在鼠标移到元素上时显示一段工具提示文本...html> <body> <p title="鼠标滑过 我就显示啦">Hello Word</p>
  • vue动态添加元素,为动态元素绑定点击事件。(根据个人业务记录) 需求: 返回一个list,首先显示list中某一个的一部分,然后可以点击一个图标,显示对应剩下的一部分。 思路: 手下想到的是用v-html标签对数据...
  • 1.拼接一段html let conten=`<button οnclick="come()">点我</button>`; mouseClickHandler(f) { //创建html元素 let contentHTML = "<div style='width:80px; font-size:12px;font-weight:bold;
  • vue动态绑定css雪碧图

    2021-03-05 10:05:15
    其实原理很简单,一个简单的钩子函数 + 字符串拼接!!! 接下来,小刀拉屁股,让你开开眼!!! html部分 <body> <div id="app"> //data是从后台获取到的数据 <div v-for="(item,index) in ...
  • 最近做一个项目,由于数据展示受限制,只能动态拼接代码,但是发现一个问题,在标签上写的@click="xxx()" 不管用,最后专业前端朋友与之解决,话不多说,看解决办法,相信你那么聪明,一看就懂! vue 中拼接代码 ...
  • vue绑定动态id

    万次阅读 2018-11-20 10:51:13
    场景:使用vue中的v-for循环动态的添加input,在编辑的时候需要获取input的id进而获取编辑值传入后台。由于通过:id传入的id有可能空值,因此我采用了拼接的方式将属性值和下标index拼接在一起做为id,成功解决空值...
  • 使用vue+ztree展示地区时发现,拼接代码地区后显示新增、修改操作,click事件无效两种解决方案:1、事件绑定到window2、手动添加点击事件addHoverDom:function(treeid, treeNode) {if(treeNode.id == '') ...
  • 如下这个html标签,最终根据数据返回值是,1则表示男性,2则表示女性,渲染2种不同的icon图标。 <span class=“gender bg-muted fa-nanxing”></span> <span class=“gender bg-muted fa-nvxing”>...
  • Vue动态绑定CSS

    2019-05-10 15:26:08
    不过,字符串拼接麻烦且易错。因此,在将v-bind用于class和style时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。 下面介绍绑定html class中的对象语法 <di...
  • 所以动态拼接的图片地址,在:src的时候不经过编译。 就会发生图片404,找不到资源。 那么本地图片资源如何动态的绑定呢? 实践: 其实,真相往往就是如此简单。 转载于:...
  • 第一种(使用模板字符串)早期字符串拼接年代new Vue({el: "#app",template: ' {{message}} ',data: {message: '字符串拼接'}})第二种(使用script元素)HTML5标准之前的写法{{message}}new Vue({el: "#app"...
  • 动态拼接html语句中绑定了click事件,当鼠标点击时触发methods中某方法进行处理,但是,发现鼠标点击并没有触发该方法! 该问题在实际开发过程中遇到过一次,但今天遇到后,忘记了之前是怎么处理的,又浪费...
  •  最近在使用vue与bootstrap-table结合生成表格时,按以前的经验----每列数据可用formatter:function(value,row,index){}进行一些其他的操作,动态拼接html元素和绑定的方法事件都可正常执行,但在vue内使用后,...
  • 操作元素的 class 列表和...不过,字符串拼接麻烦且易错。因此,在将v-bind用于class和style时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。 <!DOCTYPE html> <h...

空空如也

空空如也

1 2 3 4
收藏数 79
精华内容 31
关键字:

vue动态拼接html

vue 订阅