Paste_Image.png模板渲染
vue2.0种,必须使用
v-bind
将变量渲染到属性中,
Paste_Image.png列表渲染
v-for
Paste_Image.png也可以使用
v-text
方法
Paste_Image.png加序号index,2.0需要先声明index,例如:为奇数项添加odd类
V-for
进行对象渲染
引入组件:import后再注册 ,最后以标签的形式使用
Paste_Image.png
es6的简写,
Paste_Image.png
等同于
之前的版本
之前的版本
v-for
渲染组件,意义:动态为组件传值(比如key)
定义一个方法,实现列表的更新
Paste_Image.png Paste_Image.png以下方法会触发列表的更新
改变数组的长度,直接为数组中的某一项赋值,不会触发列表的更新
Paste_Image.png
将数组第二项改为pinnaple,点击按钮,仍然不更新
需要使用vue提供的全局set方法
首先要导入Vue
Paste_Image.png
总结
Paste_Image.png
v-bind
动态绑定,同步更新,比如link,class属性的绑定
当class是一个对象时,值为true的class会展现出来
Paste_Image.png Paste_Image.png当class是数组时,
也可以直接输入
Paste_Image.png
混用,数组和对象
Paste_Image.png Paste_Image.png绑定style
Paste_Image.pngPaste_Image.png Paste_Image.png条件渲染
v-if
,v-show
按钮取反
按钮
区别:
v-show
使用的是display:none;
v-if`是从DOM中被删除
Paste_Image.png
v-else配合v-if使用
总结
n
网友评论