vue语法概要二
函数 | 用途 | 类别 |
---|---|---|
v-html | 用于输出html格式的数据 | 输出 |
v-bing | 用于输出值 | 输出 |
v-model | 双向绑定 | 输入和输出 |
v-if | 逻辑判断 | 分支语句 |
v-else | 同上 | 分支语句 |
v-if-else | 同上 | 分支语句 |
v-for | 遍历数据 | 循环语句 |
v-html用例:
<template>
<div >
<h1>{{ msg }}</h1>
<div v-html="msg1"></div>
<br>
<br>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg1:'<h1>aaaa</h1>'
}
}
}
</script>
v-bing用例:
<template>
<div >
<label for="r1">update color</label>
<input type="checkbox" v-mode="use" id="r1">
<br>
<div v-bind:class="{'class1':use}">v-bingd:class指令</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
use:false
}
}
}
</script>
<style>
.class1{
background: #;
color: #eee;
}
</style>
v-model:来实现双向数据绑定:
<template>
<div>
<input type="text" v-model="todo" />
<button @click="addtod()">Add</button>
<hr />未完成事项
<ul>
<li v-for="(item,key) in list" v-if="!item.checked">
<input type="checkbox" v-model="item.checked" />
--{{item.title}}
<button @click="delData(key)">shanchu</button>
</li>
<hr />已完成事项
</ul>
<ul>
<li v-for="(item,key) in list " v-if="item.checked">
<input type="checkbox" v-model="item.checked" />
{{item.title}}
<button @click="delData(key)">shanchu</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
todo: ""
};
},
methods: {
addtod() {
this.list.push({
title: this.todo,
checked: false
});
this.todo = "";
},
delData(key) {
this.list.splice(key, );
}
}
};
</script>
逻辑判断:v-if、v-else、v-if-else:
<template>
<div v-if="seen">
<p>现在你看到我了</p>
<div v-if="ok">
<h1>跟着菜鸟教程学习vue</h1>
<p>学的不是技术,是情怀</p>
<p>哈哈哈,mac打字不太习惯</p>
</div>
<!--><h1>{{ msg }}</h1><!-->
---------------------------------
if--else
<div v-if="Math.random()>0.5">sorry</div>
<div v-else>not sorry</div>v--else
<div v-if="type=='a'">a</div>
<div v-if="type=='b'">b</div>
<div v-if="type=='c'">c</div>
<!--> over<!-->
</div>
</template>
<script>
import { truncate } from "fs";
export default {
name: "testif",
data() {
return {
seen: true,
//msg: "test",
ok: true,
type: "c"
};
}
};
</script>
v-for遍历:
<template >
<div>
<div v-for=" item in sites ">
<li>{{item.name}}</li>
<li>---------</li>
</div>
</div>
</template>
<script>
export default {
name: "v-if",
data() {
return {
sites: [{ name: "goolge" }, { name: "baidu" }, { name: "cnlinfo" }]
};
}
};
</script>
当然还有v-on也就是js中常见的click,简写@click,看到这种勿惊慌。
vue语法概要二的更多相关文章
- 七、vue语法补充二(动态组件 & 异步组件、访问元素 & 组件、混入)
1..sync 修饰符 2.3.0+ 新增 vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定.类似于v-model的效果 例子: this.$ ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- JavaScript语言精髓(1)之语法概要拾遗(转)
JavaScript语言精髓(1)之语法概要拾遗 逻辑运算 JavaScript中支持两种逻辑运算,“逻辑或(||)”和“逻辑与(&&)”,他们的使用方法与基本的布尔运算一致: v ...
- 2. Vue语法--插值操作&动态绑定属性 详解
目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...
- Swift3.0基础语法学习<二>
对象和类: // // ViewController2.swift // SwiftBasicDemo // // Created by 思 彭 on 16/11/15. // Copyright © ...
- vue语法之拼接字符串
先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind: ...
- java基础语法(二)--单列模式
java基础语法(二)--单列模式 /** * 功能:单列模式 * @author Administrator * */ public class SingletonTest { public sta ...
- Sublime Text2支持Vue语法高亮显示
1.下载vue语法高亮插件vue-syntax-highlight 下载地址:https://github.com/vuejs/vue-syntax-highlight 2.将vue-syntax-h ...
- Vue小项目二手书商城:(四)详情页和购物车(emit、prop、computed)
实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...
随机推荐
- osg::NodeVisitor
[1]osg::Group [2]osg::PositionAttitudeTransform [2]osg::MatrixTransform [3]osg::Geode [2]osg::Matrix ...
- windows下打开binlog
上篇我们介绍了binlog(参见mysql的binlog),配置文件用的是linux下的my.cnf,那么在windows下如何打开binlog呢?道理是相同的,配置文件是不一样的.在windows下 ...
- question——缓存清理、更新
突然理解了各大电信公司客服说的最多的一句话“您提交的申请将会在**小时之后生效,建议您到时登陆查看”. 分析之后,我认为这里面大多的原因在于: 1.定时任务: 2.缓存有效期. 可见这么庞大的公司,目 ...
- 【408】C函数中的ADT
类似类的形式 boardADT.h:所有的宏.声明等部分写在这里 boardADT.c:只需要 #inclue "boardADT.h",不需要 include 其他系统头文件,然 ...
- 使用MockMvc进行springboot调试(SpringbootTest)
测试前关闭web项目.springboot启动程序WebApplication.class 笔者本地自定了端口SpringBootTest.WebEnvironment.DEFINED_PORT 代码 ...
- LD_LIBRARY_PATH无效
在os x 上设置LD_LIBRARY_PATH无效,env命令看不到这个变量,下面的文章说明了这个问题 说明:网上基本针对这个值的设置分为两面,Windows派和Linux派,Windows的不说, ...
- Docker 容器的通信(十二)
目录 一.容器间通信 1.IP 通信 2.Docker DNS Server 3.joined 容器 二.容器访问外部网络 三.外部网络访问容器 1.随机端口 2.指定端口 3.不指定任何端口. 4. ...
- Windows删除某服务
win+R然后cmd进入命令窗口 sc delete 服务名
- [转帖]从壹开始前后端分离【重要】║最全的部署方案 & 最丰富的错误分析
从壹开始前后端分离[重要]║最全的部署方案 & 最丰富的错误分析 https://www.cnblogs.com/laozhang-is-phi/p/beautifulPublish-most ...
- 【转】Linux下查看CPU、内存、磁盘信息
1.查看CPU信息# 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数cat /proc/c ...