vue模板语法上
vue的插值案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的插值案例</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>文本</h3>
{{msg}}
</li>
<li>
<h3>html字符串渲染</h3>
<div v-html="htmlStr"></div>
{{msg}}
</li>
<li>
<h3>v-bind属性绑定指令</h3>
<input type="text" value="" />
<input type="text" v-bind:value="age" />
</li>
<li>
{{str.substr(,).toUpperCase()}}
{{ number + }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: 'hello Vue!!',
htmlStr: '<span style="color: red;">红了</span>',
age: ,
str: 'https://www.baidu.com',
number: ,
ok: true,
id:, }
})
</script> </html>
vue的指令门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的指令门案例</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>分支</h3>
<div v-if="score>90">A</div>
<div v-else-if="score>80">B</div>
<div v-else-if="score>70">C</div>
<div v-else-if="score>60">D</div>
<div v-else="">E</div>
<input type="text" v-model="score" />
</li>
<li>
<h3>v-show指令</h3>
<div v-show="flag">出来吧1</div>
<!-- 分清楚v-if跟v-show的区别
v-if：控制的是标签是否打印
v-show：控制的是标签的样式
-->
<div v-if="flag">出来吧2</div>
</li>
<li>
<h3>v-for指令</h3>
<div v-for="item,index in data1">
{{item}}~{{index}}<br />
</div>
<hr />
<div v-for="item,index in data2">
{{item.id}}~{{item.name}}~{{index}}<br />
</div>
</li>
<li>
<h3>动态事件调用</h3>
<button v-on:[evname]="xxx">动态事件调用</button>
<input type="text" v-model="evname"/>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
score:,
flag:true,
data1:[,,,,],
data2:[{
id:,
name:'篮球',
},
{
id:,
name:'跳棋'
},
{
id:,
name:'軍棋'
}],
evname:'click'
},
methods:{
xxx(){
console.log('xxx方法被调用')
}
}
})
</script> </html>
vue的过滤器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的过滤器案例</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>局部过滤的注册</h3>
{{msg}}<br />
{{msg|a}}<br>
{{javaxl|a}}
</li>
<li>
<h3>局部过滤的串联</h3>
{{javaxl|a|b}}
</li>
<li>
<h3>全局过滤器的注册</h3>
{{javaxl|c}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.filter('c',function(v){
console.log(v);
return v.substring(,);
}) new Vue({
el: "#app",
data: {
msg:'https//www.baidu.com',
javaxl:'https://www.javaxl.com'
},
filters:{
//a是过滤器的名字,后面的
'a':function(v){
console.log(v);
return v.substring(,);
},
'b':function(v){
console.log(v);
return v.substring(,);
}
}
})
</script> </html>
vue的计算属性监听属性案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的计算属性监听属性案例</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>计算属性</h3>
单价<input v-model="price"/>
数量<input v-model="num" />
总价:{{total}}
</li>
<li>
<h3>监听属性</h3>
km:<input v-model="km" />
m:<input v-model="m" />
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
price:,
num:,
km:,
m:
},
computed:{
total(){
return parseInt(this.price)*parseInt(this.num);
}
},
watch:{
km(v){
this.m=v*;
},
m(v){
this.km=v/;
}
}
})
</script> </html>
今天就到这里了
vue模板语法上的更多相关文章
- vue模板语法上集
模板语法上集 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表 ...
- Blazor和Vue对比学习（基础1.2）：模板语法和Razor语法
Vue使用模板语法,Blazor使用祖传的Razor语法,从逻辑和方向上看,两者极为相似,比如: 都基于HTML 都通过声明式地将组件实例的状态(数据/方法)绑定到呈现的DOM上 都通过指令实现更加丰 ...
- [Vue源码]一起来学Vue模板编译原理(一)-Template生成AST
本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vu ...
- [Vue源码]一起来学Vue模板编译原理（二）-AST生成Render字符串
本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...
- sublime SublimeTmpl 添加vue模板
sublime2安装时候报错在control中加下面的代码 重新启动,可以进行安装 import urllib2,os; pf='Package Control.sublime-package'; i ...
- Vue模板内容
前面的话 如果只使用Vue最基础的声明式渲染的功能,则完全可以把Vue当做一个模板引擎来使用.本文将详细介绍Vue模板内容 概述 Vue.js使用了基于HTML的模板语法,允许声明式地将DOM绑定至底 ...
- Vue模板逻辑
前面的话 上一篇介绍了Vue的模板内容,而对于一般的模板引擎来说,除了模板内容,还包括模板逻辑.常用的模板逻辑包括条件和循环.本文将详细介绍Vue模板逻辑 条件渲染 在Vue中,实现条件逻辑依靠条件指 ...
- （英文版）VScode一键生成.vue模板
1. 安装vscode,官网地址 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装(Install) 3.新建代码片段 点击Code(代码)-Preferences( ...
- vscode写vue模板--代码片段
Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...
随机推荐
- IT兄弟连 HTML5教程 CSS3属性特效 圆角
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
- 在Mac上安装JDK1.8及环境变量配置
今天我们来讲一讲,在Mac上的JDK安装. 第一步,打开终端输入 java -version 看看是否本地已经安装了JDK,如果未安装,OK,继续- 第二步,到官网下载JDK.勾选“Accept Li ...
- .net core 获取树莓派的机器码，唯一ID，唯一串号
今天在实际开发树莓派程序的时候,碰到了一个问题,需要获取到树莓派的唯一串号信息.必须在.net core的环境下: 那么如何实现呢?我们先查找树莓派的基本信息是储存在哪里的? 我们在下面的路径里找到了 ...
- ASP.NET MVC5基础 - Global.asax详解
简介 作用 Global.asax的处理事件 实例说明 总结 简介 Global.asax是一个文本文件,它提供全局可用代码.这些代码包括应用程序的事件处理程序以及会话事件.方法和静态变量.有时该文件 ...
- Netty服务端NioEventLoop启动及新连接接入处理
一 Netty服务端NioEventLoop的启动 Netty服务端创建.初始化完成后,再向Selector上注册时,会将服务端Channel与NioEventLoop绑定,绑定之后,一方面会将服务端 ...
- SQLyog连接MySQL8.0报2058错误的解决方案
引言 用SQLyog连接MySQL8.0(社区版:mysql-installer-community-8.0.15.0.msi),出现错误2058(Plugin caching_sha2_passwo ...
- 关于字符串的格式化----format与%
格式化字符串一般有两种方法 1.%(d整数,s字符,f浮点数) 2.format 用处极为广泛且限制不多 注意:第一种对于数组的传递会报TypeError,所以必须传递数组 a = (1, 2, 3) ...
- Sqlite—数据库管理与表管理
数据库管理 创建数据库,创建完成之后自动进入 [root@localhost ~]# sqlite3 /www/wwwroot/task.db 使用数据库,如果 /www/wwwroot 路径下面没有 ...
- 解决Android Screen Monitor在android8.0及以上系统报错："E/Screenshot: Unsupported protocol: 2"
1.打开命令窗口,切换到 asm.jar 所在目录,执行 java -jar asm.jar,正常情况下打开后连接上设备会显示出画面 2.但是在android8.0以上系统该asm.jar包就无法正常 ...
- MongoDB学习笔记（六、MongoDB复制集与分片）
目录: MongoDB部署模型 MongoDB可复制集 MongoDB读写分离 分片架构部署 最佳实践 MongoDB部署模型: 单机 -> 可复制集 -> 分片集群 MongoDB可复制 ...