标签：input 也会 vue charset 总结 视图 ... txt otc
vue中常用v-表示指令，下面总结一下常用的指令有哪些：
相当于元素的innerText属性，必须是双标签
相当于元素的innerHTML属性
v-for的使用，除了item属性，还有一些其他辅助属性。假设你现在循环的对象名字为students:
第一种：if ... else if ...else型
是否插入元素
第二种：v-show
是否隐藏元素
v-bind:属性名="常量 || 变量名"，简写形式——:属性名="常量 || 变量名"
如：
<div v-bind:属性名="变量"></div> //可以简写成 <div :属性名="变量"></div> //如果要赋值常量，需要给常量用单引号包起来，如 <div :属性名=" ‘常量‘ "></div>
所谓的双向绑定，就是你在视图层里面改变了值，vue里面对应的值也会改变。只能给具备value属性的元素进行双向数据绑定。
v-on:click = "方法名 || 直接改变 vue 内部变量"，简写形式——@click = "方法名 || 直接改变 vue 内部变量"
<div v-on:click=" num = 1 "></div> //可以简写成 <div @click=" num = 1 "></div>
可以直接更改vue内部的变量，如上面的num，是我在data里面定义的一个属性。
上述所有指令的例子代码：
<!DOCTYPE html> <html lang="en"> <head> <title>vue常用指令</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script> <style type="text/css"> .even{background-color: #f2f2f2} </style> </head> <body> <div id="app"></div> <script type="text/javascript"> new Vue({ el:‘#app‘, template:` <div> <h1 v-text="myTxt"></h1> <hr/> <div v-html="myHtml"></div> <hr/> <button v-if=" num == 1 ">显示1</button> <button v-else-if=" num == 2 ">显示2</button> <button v-else=" num == 3 ">显示3</button> <hr/> <button v-show="isShow">我默认显示</button> <hr/> <div v-bind:data-name=" myName " :data-sex=" ‘女‘ ">通过v-bind来给属性赋值</div> <hr/> <button v-on:click=" num = 1">改变num值为1</button> <hr/> <input v-model="country" placeholder="试着输入中国"> <div v-if=" country == ‘中国‘ ">中国梦，我的梦！</div> <hr> <ul> <li v-for="(item,index) in newsList" :class="index%2==0 ? ‘even‘ : ‘‘"> <p>{{item.title}}<p> 发布时间：<span>{{item.time}}<span> </li> </ul> <hr> <div v-for="(value,key) in students"> {{key}}:{{value}} <br/> </div> </div> `, data:{ myTxt:‘我是v-text的值‘, myHtml:‘<p>我是HTML</p>‘, num:2,//改变num的值看效果 isShow:true, myName:‘Sheryl‘, count:1, country:‘‘, newsList:[ {title:"新闻标题一",time:"2018-08-31"}, {title:"新闻标题二",time:"2018-08-31"}, {title:"新闻标题三",time:"2018-08-31"} ], students:{ ‘name‘:‘Sheryl‘, ‘sex‘:‘女‘, ‘age‘:25 } }, methods:{ changeCount(action) { if (action === ‘minus‘) { if (this.count > 1) { this.count--; } else { alert("不能再减了") } } else { this.count++ } }, } }) </script> </body> </html>
标签：input 也会 vue charset 总结 视图 ... txt otc
原文地址：https://www.cnblogs.com/sese/p/9571315.html
