vue.js的一些小语法v-for,v-text,v-html,v-on:click
2017-11-25 16:01
459 查看
1.Vue的目录结构:
==============================================================================================================================
2.App.vue 入口文件
<template>
<div>
(1) v-for遍历component
<componeta v-for="(value,key) in objList"></componeta> //循环遍历compoeta组件 componenta是引用的组件 内容为 i am componenta
效果:
数据:
<!--导入组件-->
<script>
/* eslint-disable */
import Hello from './components/Hello'
import componeta from './components/a.vue' //导入component组件
export default {
components:{
componeta :componeta 在components中引用一下
},
------------------------------------------------------------------------------------------------------------------------------------------
(2) v-on:click的使用
<button v-on:click="addItem">addItem</button> //点击Button按钮,执行addItem方法, 控制台打印console.log(this.list)
addItem方法如下:
效果如下:
------------------------------------------------------------------------------------------------------------------------------------------------------
(3) v-text,v-html的使用
<p v-text="hello1"></p> v-text和v-html的区别,v-html可以将变量中的标签去掉,而v-text不能,显示的是字符串
<p v-html="hello1"></p>
{{ num + 1 }} 变量使用双大括号,es6的语法
{{status ? 'success' : 'fail'}} 三目运算符
效果:
相应数据为:
------------------------------------------------------------------------------------------------------------------------------------------------
(4) v-for遍历集合
<p v-for="item in list">{{item.name}} {{item.price}}</p> v-for用于遍历集合,item为单个元素,item.nam为单个元素中的一个属性
<ul>
<li v-for="(item,index) in list" v-text="item.name + '_'+ item.price+ '_'+index"></li> v-for遍历集合时带上index索引 使用v-text和{{}}输出单个元素一样,推荐{{}}}
</ul>
<ul>
<li v-for="(value,key) in objList">{{key}}-{{value}}</li> v-for遍历对象属性,(value,key) value放在前面,key放在后面
</ul>
</div>
效果:
数据:
</template>
-------------------------------------------------------------------------------------------------------------------------------------------------------
<!--导入组件-->
<script>
/* eslint-disable */
import Hello from './components/Hello'
import componeta from './components/a.vue'
export default {
components:{
componeta :componeta
},
data(){
return{
hello1: '<span>shuaishuai</span>',
num:1,
status: true,
list:[
{
name: 'apple',
price :34
},
{
name: 'apple',
price :34
}
],
objList:{
name:'apple',
price: 34,
color:'red',
weight:14
}
}
},
methods : {
addItem () {
console.log(this.list)
}
}
}
</script>
<!--样式代码-->
<style>
html {
height: 100%;
}
</style>
vue的相关网址:
http://cn.vuejs.org/ vuejs中文官网
vuejs源码 https://github.cm/vuejs/vue
vuejs官方工具 https://github.com/vuejs
vuejs官方论坛 http://forum.vuejs.org
相关文章推荐
- VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
- 详解vue.js的事件处理器v-on:click
- vue.js中v-on:textInput无法执行事件问题的解决过程
- Vue.js常用指令汇总(v-if//v-show//v-else//v-for//v-bind//v-on等)
- Vue.js绑定HTML class数组语法错误的原因分析
- vue.js之v-text 与 v-html
- vue学习02--处理用户输入(v-on/v-model/v-show/v-text/v-html)
- Vue.js之v-text/v-html/v-bind
- vue.js的事件处理器v-on:click
- Vue.js绑定HTML class数组语法错误(官网错误,同学可以上github上改一下)
- js中的基础text(),html(),val()有什么区别
- Two ways to get HtmlTextWriter for HTML rendering
- Warning: Invalid argument supplied for foreach() in /home/XXX/XXXX_html/category.php on line 100解决
- jquery textSearch实现页面搜索 注意!!!!调用这个插件后,js事件绑定如,on、bind、live delegate全部失效,折腾了我一整天!!!
- vue.js入门教程之基础语法小结
- js 通过html()及text()方法获取并设置p标签的显示值
- 问题总结php、html、js、css、java、python、vue、spring等
- JavaScript基础(基本语法:变量、语句、数组、函数、对象、全局方法以及js与java不同,js与html关联)