如何使用Vue.js中的v-html指令绑定HTML标签元素

 时间:2024-11-19 18:46:30

1、第一步,双击打开HBuilder工具,新建静态页面vhtml.html,并引入vue.js文件,如下图所示:

如何使用Vue.js中的v-html指令绑定HTML标签元素

2、第二步,在<body></body>标签元素插入一个div和input输入框标签,添加v-model和v-html指令,如下图所示:

如何使用Vue.js中的v-html指令绑定HTML标签元素

3、第三步,在<div></div>标签下方插入<script></script>,并在这个标签初始化vue组件函数,如下图所示:

如何使用Vue.js中的v-html指令绑定HTML标签元素

4、第四步,保存代码并在浏览器中预览该界面,可以查看到浏览器控制台报错了,如下图所示:

如何使用Vue.js中的v-html指令绑定HTML标签元素

5、第五步,修改v-html指令和v-model指令绑定的数据变量,然后保存代码,如下图所示:

如何使用Vue.js中的v-html指令绑定HTML标签元素

6、第六步,再次打开浏览器,查看页面的效果,并打开浏览器控制台,查看元素结构,如下图所示:

如何使用Vue.js中的v-html指令绑定HTML标签元素
  • 掌上生活登录设备查看
  • 下厨房app怎么查看自己看过的菜谱?
  • 断头今日意如何 创业艰难百战多意思?
  • 手机支付宝如何绑定银行卡?
  • 如何调整心态面对生活
  • 热门搜索
    中国十大旅游城市 张家港旅游 内蒙古旅游地图 春节旅游好去处 马耳他旅游 丹巴旅游 北京长城旅游 眉山旅游 韩国旅游价格 乐亭旅游