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

如图：



要点：主要是通过<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-----------------------------
显示或者隐藏
需求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优点：
小而简单,轻量级框架,上手容易,简单易学,便于与第三方库或既有项目整合
只关注视图层， 采用自底向上增量开发的设计
它的目标是通过尽可能简单的 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-if与v-show的区别：
  共同点：都是动态显示DOM元素
  不同点：v-if是对节点的删除和添加
      v-show是元素display属性值none和block的切换
使用场景：
   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-for中key的使用注意事项：
                         v-for 循环的时候，key属性只能使用 number 或string，且是唯一的
                         key在使用的时候，必须使用 v-bind 属性绑定的形式，指定key的值
四动态绑定指令：v-bind
1、属性绑定：
一般属性都可以实现动态切换绑定值，值为字符串类型
2、class绑定：
我们可以传给 v-bind:class一个动态值，以动态地切换 class类名
值类型为字符串、数组、对象
             渲染结果：
      动态绑定class可与class属性共存：
  除class属性能共存外，其它属性共存一律忽视原生属性
3、style绑定：
我们可以传给 v-bind:style一个动态的样式属性值，以动态地切换样式的不同值；
值类型为字符串、数组、对象
渲染结果：
   注意：class绑定和style绑定，可直接绑定到一个对象通常更好，这会让模板更清晰：
渲染结果：
    注意：class绑定和style绑定，可直接绑定到一个对象通常更好，这会让模板更清晰：
v-bind语法可以简写为冒号  v-bind:class  ==  :class
五数据双向绑定：v-model
v-model实现数据双向绑定，一般用于表单元素
        文本框中的文本都是字符串，v-model中的值相同:
上述中用户输入信息可以动态绑定到msg所劫持的数据
文本框、文本域、单选框、下拉菜单中 v-model绑定的值为value
　　　　　　　 复选框 v-model绑定的值是boolean
修饰符：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。
 .lazy 修饰符：从 input 事件转变为 change 事件进行同步：
　.number修饰符：用户输入强制转换为number类型:
.trim修饰符：自动过滤用户输入的首尾空白字符：
 
六事件绑定指令：v-on
支持所有原生事件，调用函数方法，第一个参数为实际参数，第二个为参数为事件对象(事件对象必须为$event关键字)。
函数方法写在VUE实例对象methods属性中
事件指令v-on 可简写为@符号：
事件修饰符：
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 使用事件捕获模式
.self 只在当前元素本身触发
.once 只触发一次
.passive跳过默认事件的检查，提升性能，特别针对屏幕滑动行为
按键修饰符：
.enter  .tab  .delete  .esc  .space  .up  .down .left .right
系统修饰符：
.ctrl .alt  .shift  .meta
 
vue事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on有几个好处：
1、扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2、无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3、当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
以上为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;
},