函数 用途 类别
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语法概要二的更多相关文章

  1. 七、vue语法补充二(动态组件 & 异步组件、访问元素 & 组件、混入)

    1..sync 修饰符 2.3.0+ 新增 vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定.类似于v-model的效果 例子: this.$ ...

  2. 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 ...

  3. JavaScript语言精髓(1)之语法概要拾遗(转)

    JavaScript语言精髓(1)之语法概要拾遗   逻辑运算 JavaScript中支持两种逻辑运算,“逻辑或(||)”和“逻辑与(&&)”,他们的使用方法与基本的布尔运算一致: v ...

  4. 2. Vue语法--插值操作&动态绑定属性 详解

    目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...

  5. Swift3.0基础语法学习<二>

    对象和类: // // ViewController2.swift // SwiftBasicDemo // // Created by 思 彭 on 16/11/15. // Copyright © ...

  6. vue语法之拼接字符串

    先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind: ...

  7. java基础语法(二)--单列模式

    java基础语法(二)--单列模式 /** * 功能:单列模式 * @author Administrator * */ public class SingletonTest { public sta ...

  8. Sublime Text2支持Vue语法高亮显示

    1.下载vue语法高亮插件vue-syntax-highlight 下载地址:https://github.com/vuejs/vue-syntax-highlight 2.将vue-syntax-h ...

  9. Vue小项目二手书商城:(四)详情页和购物车(emit、prop、computed)

    实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...

随机推荐

  1. VC3DGraphicsWindowQt

    VC3DGraphicsWindowQt::VC3DGraphicsWindowQt(QWidget* parent, Qt::WindowFlags f) { osg::DisplaySetting ...

  2. svn如何撤销之前某个版本所做的改变

    撤销这个版本所做的修改:(撤销这个版本所做的修改) 右键项目svn->show log->revert changes from this revision 如果要恢复到某个版本:(这个版 ...

  3. jQuery插件—获取URL参数

    做的项目中需要用到通过JS获取GET参数,上网找了一下,找到如下插件: 例如 当前你的URL是: http://www.xxx.com/index.php?test=1&kk=2 //如果想获 ...

  4. 使用ClientScriptManager向客户端注册脚本

    ClientScriptManager在非异步(就是说非AJAX)环境下使用的.如果要在异步环境下注册脚本应该使用ScriptManager的静态方法来注册(ScriptManager兼容异步于非异步 ...

  5. 图形学入门(3)——区域填充算法(region filling)

    继续图形学之旅,我们已经解决了如何画线和画圆的问题,接下来要解决的是,如何往一个区域内填充颜色?对一个像素填充颜色只需调用SetPixel之类的函数就行了,所以这个问题其实就是:如何找到一个区域内的所 ...

  6. 【C/C++】【VS开发】结构体存储空间数据对齐说明

    关于内存对齐 一: 1.什么是内存对齐 假设我们同时声明两个变量: char a; short b; 用&(取地址符号)观察变量a, b的地址的话,我们会发现(以16位CPU为例): 如果a的 ...

  7. Matlab绘制阶梯形图

    声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 对于Matlab的使用情况常常是这样子的,很多零碎的函数名字很难记忆,经常用过后过一段时间就又忘记了,又得去网 ...

  8. js 实现数字格式化(货币格式)几种方法

    // 方法一 function toThousands(num) { var result = [ ], counter = 0; num = (num || 0).toString().split( ...

  9. [转帖]拿小本本记下的Linux Shell常用技巧(一)

    拿小本本记下的Linux Shell常用技巧(一) https://zhuanlan.zhihu.com/p/73361101 一. 特殊文件: /dev/null和/dev/tty Linux系统提 ...

  10. git简易指南

    目录 工作流 初始化仓库 查看分支 添加和提交 推送改动 分支 重命名分支 更新与合并 替换本地改动 回滚 远程仓库 有用的贴士 GIT vs SVN 工作流 你的本地仓库由 git 维护的三棵&qu ...