vue 指令
Vue 指令
2023-09-11 14:22:19 时间
v-text和v-html的区别:
v-text :会进行转译
v-html:不会进行转译
v-html demo :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue入门</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="first"> <div v-html="content"></div> </div> <script> new Vue({ //绑定上面的id el指的是vue实例跟哪个dom节点绑定 el:"#first", data:{ content:"<h1>愿所有努力不被辜负</h1>" } }) </script> </body> </html>
效果:
v-text demo :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue入门</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="first"> <div v-text="content"></div> </div> <script> new Vue({ //绑定上面的id el指的是vue实例跟哪个dom节点绑定 el:"#first", data:{ content:"<h1>愿所有努力不被辜负</h1>" } }) </script> </body> </html>
效果:
v-on:给元素绑定click事件,触发handleClick方法,定义在vue实例的methods
v-on:给元素绑定click事件
v-on:click="handleClick":触发handleClick方法
methods: 定义在vue实例的methods被调用
通过this.content 改变实例里面数据 vue实例尖听数据的改变 更新模板
this.content="加油 是的"
demo :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue入门</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="first"> <div v-on:click="handleClick">{{content}}</div> </div> <script> new Vue({ //绑定上面的id el指的是vue实例跟哪个dom节点绑定 el:"#first", data:{ content:"明天会更好" }, methods: { handleClick: function(){ this.content="加油 是的" } } }) </script> </body> </html>
效果:
2018-05-01 11:59:31
相关文章
- vue生成路由实例, 使用单个vue文件模板生成路由
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue.js3:用qrcode-parser解析二维码图片(vue@3.2.36 / qrcode-parser@2.0.4)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue.js 3.2.22:用useIntersectionObserver监控多行数据的可见性(@vueuse/core@7.0.3)
- vue指令——@click结合:src绑定图片url
- 【视频】vue指令之v-else-if
- vue学习资料:vue笔记ppt整理(vue基础指令&vue基础语法)
- vue.js项目打包报错Error: You appear to be using a native ECMAScript module configuration file
- Vue2.js:v-click-outside自定义指令和vue-click-outside监听鼠标点击元素外部区域事件
- vue-router2路由参数注意问题
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- vue自定义指令v-scroll(directive)
- 227:vue+openlayers自定义js横向卷帘,图层名称跟着分割线移动
- 145: vue+openlayers 根据坐标点数组值,绘制多边形,显示面积数
- 005:vue+openlayers加载Mapbox地图示例
- 如何在vue组件中引入外部的css和js文件
- 【vue】vue概述及vue的绑定原理_01
- 【vue】vue的插值语法及常用指令的应用_02
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue创建备忘录
- Vue中嵌入html页面并相互通信
- Vue this.$refs的作用