vue基础---03模板语法
时间:2021-09-10
本文章向大家介绍vue基础---03模板语法,主要包括vue基础---03模板语法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
00.v-once(用于一次性数据,固定数据)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script> </head> <body> <!-- 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。 --> <div id="app"> <h3>{{mag}}</h3> <h3 v-once>{{mag}}</h3> </div> <script> var app=new Vue({ el:'#app', data:{ mag:"Vue 前端" } }) </script> </body> </html> 一次性插入,第二次不能修改,可以通过控制台修改mag的值试一试
01.v-html(输出显示html格式)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蝴蝶教程(jc2182.com)</title> <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <h1 v-html="htmlTxt"></h1> </div> <script> var vm = new Vue({ el: '#app', data: { htmlTxt: '<span>这个是div</span>' } }); </script> </body> </html> 双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:
02.v-bin(动态地切换class)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #login{background:pink;} #register{background:red;} </style> <script src="../js/vue.js"></script> </head> <body> <div id="app"> 当你给src添加v-bind时,他就知道,是要给src动态绑定,此时imgURL就是一个变量如果没有v-bind,imgURL就是一个字符串; 语法糖的写法就是把v-bind省略,直接写: <img v-bind:src="imgURL"></img> </div> <script> var app=new Vue({ el:'#app', data:{ imgURL:'https://img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png' } }) </script> </body> </html>
03.表达式应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> {{firstname+lastname}} </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ firstname:"张", lastname:"三" } }) </script> </body> </html>
04.三目运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> {{isVip?"欢迎vip用户":"欢迎普通用户"}} </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ isVip:"true" } }) </script> </body> </html>
05.v-on(事件指令)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> 事件绑定 <div id="app"> <button v-on:click="changeBg">改变背景</button> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", methods:{ changeBg:function(){ document.body.style.background="pink"; } } }) </script> </body> </html> 通过click改变页面颜色
原文地址:https://www.cnblogs.com/hunter1/p/15250759.html
- Android Studio快捷键每日一练(4)
- Android Studio快捷键每日一练(3)
- 一分钟教你在博客园中制作自己的动态云球形标签页
- Python标准库06 子进程 (subprocess包)
- 摩拜、美团也伸手共享汽车拉!众多品牌里面,这三家最牛!
- Android Studio快捷键每日一练(2)
- Linux进程间通信
- Android Studio快捷键每日一练(1)
- Android开发中的全屏背景显示方案
- Android中的FragmentManager的问题
- Premiere Pro & After Effects插件开发调试方法
- RegQueryValueEx正确使用方法
- 区块链+医疗五类应用前景广阔,英美已有企业试水
- Linux进程关系
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- (火狐)Selenium WebDriver测试 NotADirectoryError: [WinError 267] 目录名称无效。
- 浅析Android高斯模糊实现方案
- Android 自定义验证码输入框的实例代码(支持粘贴连续性)
- _countof和sizeof
- Flutter适配深色模式的方法(DarkMode)
- RecyclerView+SnapHelper实现无限循环筛选控件
- 详解Android 8.1.0 Service 中 弹出 Dialog的方法
- 短信收发类无错版JustinIO.cs
- Android快速实现无预览拍照功能
- RecyclerView+PagerSnapHelper实现抖音首页翻页的Viewpager效果
- android中使用react-native设置应用启动页过程详解
- 面试官问我单例模式真的安全吗?我懵逼了
- 详解Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能
- Android自定义控制条效果
- Android使用MediaPlayer和TextureView实现视频无缝切换