如何使用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怎么查看自己看过的菜谱?
  • 断头今日意如何 创业艰难百战多意思?
  • 手机支付宝如何绑定银行卡?
  • 如何调整心态面对生活
  • 热门搜索
    幼儿园运动会加油稿 八下物理知识点 鹿角霜的功效与作用 橄榄果的功效与作用 维生素b12的作用及功能介绍 亚麻籽的功效与作用 敬亭山在什么地方 铁皮石斛的功效与作用 女生大专学什么专业好 翻白草的功效与作用