如何利用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的话尽量避免直接去 *** 作dom元素的，

1、建议直接通过数据取驱动生成模板

2、如果非要直接 *** 作dom建议在mounted生命周期中获取dom通过html或者append方法添加元素或者内容

比如有这么个router需要跳转

const router = new VueRouter({

routes: [

{

path: '/user/:userId',

name: 'user',

component: User

}

]

})

你的router-link可以这么写

1

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

还可以用编程在代码里写，效果也一样：

1

router.push({ name: 'user', params: { userId: 123 }})

具体的推荐你看下vue router的官网，里面有详细的说明和例子

---