如何利用Vue.js库中的v-html指令添加html元素
第一步,创建静态页面vhtml.html,并引入vue.js文件
第二步,在元素内插入两个div,一个作为外层div,另外一个作为子div,并在父div绑定v-html指令
第三步,绑定v-html指令数据,这里设置为字符串
第四步,Vue.js库的v-html指令是插入html元素,修改datas为包含
标签
第五步,预览该静态页面,这时会看到页面显示为“v-html指令”
第六步,将调试打开,这时发现
中有个
标签,就成功地添加了html元素。
Vue 数组添加数组元素和添加单个元素
添加当儿元素比较简单,只需要一个关键字push 他的意思就是把当前元素添加到数组的最后
直接添加数组元素就更简单了
他的意思就是,把当前数组this.newsList 和临时数组list 组成一个新的数组,然后重新赋值给this.newsList
vue点击当前元素添加class 删除兄弟元素的class
在vue中当我们要实现点击元素动态添加类名时,我们不能像JQ那样去用(xxx.addClass(‘class’).siblings().removeClass(‘class’))实现,那我们应该怎样去做呢
解决方案:
1.在data里面申明一个属性,默认值最好为数字类型,并且不得大于当前元素+所有兄弟元素的length,可以默认为0(第一个元素选中)
2.在当前元素中添加动态class: “:class”,使用v-bind进行绑定
3.给元素点击事件,传入当前元素的index,把元素当前的index赋值给data里面的申明的属性,这样就可以点击实现该效果
一.首先给想要添加class的元素,通过v-bind绑定一个class
二.在data中声明一个变量activeClass
三.在点击事件中
四.在style里面写想要的样式就可以了