新增一个component:
打开webstorm,运行.
找到src下的components,用右键,新建一个vue:
命名为:MyTest
结果为:
接下来分别在home.vue的和
v-if v-show区别与示例
创建一个button,单击它的时候,按钮上方会显示一段文字,再单击它,这段文字会隐藏起来。这时候就会用到常用的两种方法,就是v-if 或v-show
1,v-if:
2,v-show
执行出来的效果跟v-if的效果是一样的
3,区别:
(1)v-show都会编译,初始值为false,只是将display=none,但它也编译了。
v-if初始值为false,就不会编译了。
(2)v-show只编译一次,后面其实就是控制css,占内存,建立快
而v-if不停的销毁和创建,占内存少,但是建立慢。
故v-show性能更好一点
v_for指令练习:结合数组:
(ul li示例)
(table示例) 要用上index
v-for指令基于一个数组渲染一个列表,它和JavaScript的语法相似:
v-for=“item in items”
items是一个数组,item是当前的数组元素。
或者说,其中items是数组或者对象,item自然就是其中的一项,in 也可使用 of。
先建一个ul li示例:
网页端显示为:
如果用v-for来建立:
网页端显示:
v-for中使用index
v-for="(item,index) in items"
网页端显示:
接下来建一个table,用v-for实现:
关联的是li_employee2的内容,网页端显示为:
声明:
姓:firstname
名:lastname
做一个连接的例子,建一个div
网页端:
输入值:
第二种,函数方法
起个函数名为:quanming
页面上显示:
添加一个计算属性:
它可以用函数的形式来输出,但是它不是函数,只是一种属性,同样写在
页面端显示:
接下来是一个时间的练习:
写一个时间函数,返回调用此函数时的时间(console.log,以毫秒显示)
验证:
let myDate = new Date();
let myYear = myDate.getFullYear();
let myYear = myYear + 100;
页面端,按F12出效果: