本文作者:淘青松

vue简单使用记录vue常用细节方法

淘青松 7个月前 ( 01-05 ) 230
vue简单使用记录vue常用细节方法摘要: 今天用vue做了个模板展示页面,感觉还是非常方便,直接使用的vue.js非完整环境引入vue.js就可以直接实例化一个对象var ap = new&n...

今天用vue做了个模板展示页面,感觉还是非常方便,直接使用的vue.js非完整环境

vue渐进式js框架

引入vue.js就可以直接实例化一个对象

var ap = new Vue({
    el: '#name',//选择容器
    data: {
        items: []//设置数据
    },
    methods:{},//设置方法
});

外部设置数据和方法

//数据
ap.items = [{},{}]
//方法
var func = functiong(){};
ap.func = func;

模板中父容器使用 v-for="item in items" 属性将设置的值循环遍历,就可在模板中使用 {{ item.name }} 调用数据

图片调用使用:

<img :src="item.img" :alt="item.title" />

如果使用链接拼接:

<a :href="'link?'+item.number"></a>

元素绑定方法:

<button type="button" @click="num()">按钮</button>

方法为ap对象中methods中设置的方法名称

元素中使用 v-if="item.types === '1'" 属性可以判断显示

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

以上是一些入门用法,确实比较方便

简单使用案例:web.cyansong.com/z/list.html

文章版权及转载声明

作者:淘青松本文地址:https://cyansong.com/xue/28.html发布于 7个月前 ( 01-05 )
文章转载或复制请以超链接形式并注明出处青松博客

赞(0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享