首页>>前端>>Vue->vue两个元素中间添加元素?

vue两个元素中间添加元素?

时间:2023-12-02 本站 点击:0

如何利用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里面写想要的样式就可以了


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/9345.html