VUE命令

作者: 卐_c2a9 | 来源:发表于2018-09-14 20:15 被阅读0次

VUE主要包括(v-for,v-on,v-model,v-show,v-bind等)

1.v-model:双向绑定元素,一般用于表单元素。

<div id="itany">

<button v-on:click="alt">按钮<button>

<script src="vue/js/vue.js"></script>

<script>

var vm=new Vue({

el:"#itany",

data:{

msg:"hello"

},

methods:{

alt:function(){

console.log(vm.msg)

}

}

})

</script>

2.v-show:控制元素的显示和隐藏。

<div id="itany">

<h3>{{msg}}</h3>

<h1 v-show="!see">{{msg}}</h1>

</div>

<script src="vue/js/vue.js"></script>

<script>

new Vue({

el:"#itany",

data:{

msg:"hello vue",

see:true

}

})

</script>

3.v-bind:用于绑定属性。

<div id="itant">

<img v-bind:src="url" alt="">

</div>

<script src="vue/js/vue.js"></script>

<script>

new Vue({

el:"#itant",

data:{

url:"images/3.jpg"

}

})

</script>

4.v-if或v-else或v-else-if

<div id='itany'>

<p v-if='num==0'>00000000000</p>

<p v-else-if='num==1'>1111111111</p>

<p v-else-if='num==2'>22222222</p>

<p v-else-if='num==3'>22222222</p>

<p v-else-if='num==4'>22222222</p>

<p v-else='num==5'>555555555555</p>

</div>

<script src='js/vue.js'></script>

<script>

new Vue({

el:'#itany',

data:{

// num:Math.floor(Math.random()(max-min+1)+min) 随机数的计算公式

num:Math.floor(Math.random()(5-0+1)+0) |

}

})

</script>

相关文章

  • 查看vue版本号和@vue/cli 版本号

    划重点!!! 查看vue版本命令:npm list vue 查看@vue/cli版本命令:vue -V

  • vue-cli3

    终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令)完整详细配置(持续更新...

  • 学习vue之脚手架安装 - vue-cli

    安装脚手架vue-cli 用npm 命令安装vue-cli了,在命令行输入下面的命令 初始化vue项目 vue i...

  • vue-学习笔记

    关于vue cli 全局安装vue cli命令:npm install -g @vue/cli 创建新项目命令:v...

  • vue cli 运行相关问题

    1,运行vue cli 项目 终端命令:vue run dev 2, 运行 vue cli 项目生产环境 终端命令...

  • Vue cli2和cli3 区别

    一、生成项目命令 1、安装3.x版本的Vue脚手架: 创建Vue项目命令: 或基于ui界面创建Vue项目,命令:v...

  • vue-router 基本操作

    安装 vue-router 在命令行中进入 vue 的项目目录里,运行命令 npm install vue-rou...

  • 浏览器如何看vue服务源码js

    1. vue工程运行命令 默认vue环境已安装好,具体安装步骤,可参考Vue.js 安装执行如下命令,运行vue工...

  • vue-cli的使用

    一、安装vue命令环境 在命令提示符中输入npm install vue-cli -g安装vue-cli ...

  • 快速搭建vue项目

    安装vue CLInpm install -g @vue/cli 使用vue ui 配置项目命令:vue ui启动...

网友评论

      本文标题:VUE命令

      本文链接:https://www.haomeiwen.com/subject/pydagftx.html