网站建设销售求职,seo入门培训学多久,办公空间设计说明范文,互联网内容服务商创建应用程序实例后#xff0c;需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后#xff0c;数据和视图会相互关联#xff0c;当数据发生变化时#xff0c;视图会自动进行更新。这样就无须手动获取 DOM 的值#xff0c;使代码更加简洁…创建应用程序实例后需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后数据和视图会相互关联当数据发生变化时视图会自动进行更新。这样就无须手动获取 DOM 的值使代码更加简洁提高了开发效率。
1、双大括号标签文本插值
1.1 基本形式
文本插值是数据绑定最基本的形式使用的是双大括号{{ }}标签。它会自动将绑定的事件实时显示出来。
【实例】使用的是双大括号{{ }}标签将文本插入到HTML标签中。
bodydiv idapph3{{title}}/h3p用户ID{{userInfo.userId}}/pp用户名称{{userInfo.userName}}/pp博客信息{{userInfo.blogName}}/pp博客地址{{userInfo.blogUrl}}/p/div
/body!-- 引入 Vue 框架 --
script src../js/vue.global.js/scriptscript typetext/javascript// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp Vue.createApp({//数据data() {return {title: 使用双大括号{{ }}表达式实现文本插值,userInfo: {userId: 1,userName: pan_junbiao的博客,blogName: 您好欢迎访问 pan_junbiao的博客,blogUrl: https://blog.csdn.net/pan_junbiao}}}//使用 mount() 方法装载应用程序实例的根组件}).mount(#app);
/script
执行结果 1.2 使用表达式
在双大括号{{ }}标签中进行数据绑定时标签中可以是一个 JavaScript 表达式。这个表达式可以是常量或者变量也可以是常量、变量、运算符组合而成的式子。表达式的值是其运算后的结果。例如在双大括号{{ }}标签中使用表达式代码如下
!-- 表达式计算 --
p{{ num1 * num2}}/p!-- 表达式字符串大写函数 --
p{{ str.toUpperCase() }}/p!-- 表达式自定义的方法 --
p{{ calculator(num1,num2) }}/p
【实例】在双大括号{{ }}标签中使用 JavaScript 表达式。
bodydiv idapph3{{title}}/h3p博客信息{{userInfo.blogName}}/pp博客地址{{userInfo.blogUrl}}/p!-- 表达式计算 --p{{ num1 * num2}}/p!-- 表达式字符串截取函数 --p{{ userInfo.blogName.substr(7) }}/p!-- 表达式自定义方法 --p{{ calculator(num1,num2) }}/p/div
/body!-- 引入 Vue 框架 --
script src../js/vue.global.js/scriptscript typetext/javascript// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp Vue.createApp({//数据data() {return {title: 在双大括号{{ }}标签中使用 JavaScript 表达式,userInfo: {blogName: 您好欢迎访问 pan_junbiao的博客,blogUrl: https://blog.csdn.net/pan_junbiao},num1: 10,num2: 20}},//方法methods: {calculator: function (a, b) {return a b;}}//使用 mount() 方法装载应用程序实例的根组件}).mount(#app);
/script
执行结果 1.3 解决页面闪烁问题
使用双大括号{{ }}标签进行数据绑定时有时会因为页面加载延时而产生闪烁问题。
解决方法可以使用 v-cloak 指令。
v-cloak 指令可以隐藏未编译的 Mustache 标签直到实例准备完毕否则在渲染页面时有可能用户会先看到 Mustache 标签然后看到编译后的数据。
详细解决方法请浏览本博客的文章《Vue的 v-cloak 指令解决页面闪烁问题》 2、v-text 指令文本插值
v-text 指令用于 HTML 的文本插值实现的效果与双大括号{{ }}标签类似。语法格式如下
p v-textmessage/p 同样的在 v-text 指令中也支持使用 JavaScript 表达式。代码如下
!-- 表达式计算 --
p v-textnum1 * num2/p!-- 表达式字符串大写函数 --
p v-textstr.toUpperCase()/p!-- 表达式自定义方法 --
p v-textcalculator(num1,num2)/p
【实例】使用 v-text 指令和表达式为 HTML 标签绑定数据。
bodydiv idapph3 v-texttitle/h3p v-textuserInfo.blogName/pp v-textuserInfo.blogUrl/p!-- 表达式计算 --p v-textnum1 * num2/p!-- 表达式字符串截取函数 --p v-textuserInfo.blogName.substr(7)/p!-- 表达式自定义方法 --p v-textcalculator(num1,num2)/p/div
/body!-- 引入 Vue 框架 --
script src../js/vue.global.js/scriptscript typetext/javascript// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp Vue.createApp({//数据data() {return {title: 使用 v-text 指令和表达式,userInfo: {blogName: 您好欢迎访问 pan_junbiao的博客,blogUrl: https://blog.csdn.net/pan_junbiao},num1: 10,num2: 20}},//方法methods: {calculator: function (a, b) {return a b;}}//使用 mount() 方法装载应用程序实例的根组件}).mount(#app);
/script
执行结果 3、v-html 指令插入HTML文本
如果要输出真正的 HTML 内容需要使用 v-html 指令。语法格式如下
p v-htmlmessage/p
【实例】使用 v-html 指令输出 HTML 内容。
bodydiv idappp v-htmltitle/pp v-htmlblogName/pp v-htmlblogUrl/p/div
/body!-- 引入 Vue 框架 --
script src../js/vue.global.js/scriptscript typetext/javascript// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp Vue.createApp({//数据data() {return {title: h3使用 v-html 指令输出 HTML 内容/h3,blogName: h3 stylecolor:red您好欢迎访问 pan_junbiao的博客/h3,blogUrl: h3 stylecolor:bluehttps://blog.csdn.net/pan_junbiao/h3}}//使用 mount() 方法装载应用程序实例的根组件}).mount(#app);
/script
执行结果 输入的 HTML 文档
ph3使用 v-html 指令输出 HTML 内容/h3/p
ph3 stylecolor:red您好欢迎访问 pan_junbiao的博客/h3/p
ph3 stylecolor:bluehttps://blog.csdn.net/pan_junbiao/h3/p 4、v-bind 指令绑定属性
4.1 固定属性
双大括号{{ }}标签不能应用在 HTML 属性中。如果要为 HTML 元素绑定属性则不能直接使用文本插值的方式而需要使用 v-bind 指令对属性进行绑定。
为 HTML 元素绑定属性的操作比较频繁。为了防止经常使用 v-bind 指令带来的烦琐Vue.js 为该指令提供了一种简写形式“:”。
例如为“pan_junbiao的博客”超链接设置URL和样式的完整格式如下
a v-bind:hrefblogUrl v-bind:class{myLink:value}pan_junbiao的博客/a
简写形式如下
a :hrefblogUrl :class{myLink:value}pan_junbiao的博客/a
【实例】使用 v-bind 指令为超链接绑定URL和样式属性。
style typetext/css.myLink {text-decoration: none; /* 文本取消下划线 */cursor: pointer; /* 鼠标光标为手型*/color: #0066ff;font-size: 26px;}
/stylebodydiv idapp请点击博客链接a v-bind:hrefblogUrl v-bind:titleblogName v-bind:class{myLink:value}{{blogName}}/a/div
/body!-- 引入 Vue 框架 --
script src../js/vue.global.js/scriptscript typetext/javascript// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp Vue.createApp({//数据data() {return {blogName: pan_junbiao的博客,blogUrl: https://blog.csdn.net/pan_junbiao,value: true}}//使用 mount() 方法装载应用程序实例的根组件}).mount(#app);
/script
执行结果 4.2 动态属性
从 Vue 2.6.0 版本开始指令的参数可以是动态参数即将中括号括起来的表达式作为指令的参数。如法如下
指令:[表达式]
使用动态属性的示例代码如下
img v-bind:[attr]imageSrc
【实例】使用 v-bind 指令和动态属性为超链接绑定URL和样式属性。
style typetext/css.myLink {text-decoration: none; /* 文本取消下划线 */cursor: pointer; /* 鼠标光标为手型*/color: #0066ff;font-size: 26px;}
/stylebodydiv idapp请点击博客链接a v-bind:[attr1]blogUrl v-bind:[attr2]blogName v-bind:[attr3]{myLink:value}{{blogName}}/a/div
/body!-- 引入 Vue 框架 --
script src../js/vue.global.js/scriptscript typetext/javascript// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp Vue.createApp({//数据data() {return {blogName: pan_junbiao的博客,blogUrl: https://blog.csdn.net/pan_junbiao,value: true,attr1:href,attr2:title,attr3:class}}//使用 mount() 方法装载应用程序实例的根组件}).mount(#app);
/script
