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”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...
随机推荐
- VC3DGraphicsWindowQt
VC3DGraphicsWindowQt::VC3DGraphicsWindowQt(QWidget* parent, Qt::WindowFlags f) { osg::DisplaySetting ...
- svn如何撤销之前某个版本所做的改变
撤销这个版本所做的修改:(撤销这个版本所做的修改) 右键项目svn->show log->revert changes from this revision 如果要恢复到某个版本:(这个版 ...
- jQuery插件—获取URL参数
做的项目中需要用到通过JS获取GET参数,上网找了一下,找到如下插件: 例如 当前你的URL是: http://www.xxx.com/index.php?test=1&kk=2 //如果想获 ...
- 使用ClientScriptManager向客户端注册脚本
ClientScriptManager在非异步(就是说非AJAX)环境下使用的.如果要在异步环境下注册脚本应该使用ScriptManager的静态方法来注册(ScriptManager兼容异步于非异步 ...
- 图形学入门(3)——区域填充算法(region filling)
继续图形学之旅,我们已经解决了如何画线和画圆的问题,接下来要解决的是,如何往一个区域内填充颜色?对一个像素填充颜色只需调用SetPixel之类的函数就行了,所以这个问题其实就是:如何找到一个区域内的所 ...
- 【C/C++】【VS开发】结构体存储空间数据对齐说明
关于内存对齐 一: 1.什么是内存对齐 假设我们同时声明两个变量: char a; short b; 用&(取地址符号)观察变量a, b的地址的话,我们会发现(以16位CPU为例): 如果a的 ...
- Matlab绘制阶梯形图
声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 对于Matlab的使用情况常常是这样子的,很多零碎的函数名字很难记忆,经常用过后过一段时间就又忘记了,又得去网 ...
- js 实现数字格式化(货币格式)几种方法
// 方法一 function toThousands(num) { var result = [ ], counter = 0; num = (num || 0).toString().split( ...
- [转帖]拿小本本记下的Linux Shell常用技巧(一)
拿小本本记下的Linux Shell常用技巧(一) https://zhuanlan.zhihu.com/p/73361101 一. 特殊文件: /dev/null和/dev/tty Linux系统提 ...
- git简易指南
目录 工作流 初始化仓库 查看分支 添加和提交 推送改动 分支 重命名分支 更新与合并 替换本地改动 回滚 远程仓库 有用的贴士 GIT vs SVN 工作流 你的本地仓库由 git 维护的三棵&qu ...