Vue指令
1、直接使用{{ }} 将数据释为普通文本，展示在页面中
举例：
<h1> {{str}} </h1>
<body><divid="app"><h2>{{str}}</h2></div><scriptsrc="./js/vue.min.js"></script><script>var vm =newVue({el:'#app',data:{str:'<div>学习vue指令</div>',},methods:{}});</script>
2、v-html ：会将元素当成HTML标签解析后输出 （简单说就是它可以解析标签） 相当于innerHtml
举例：
<h1 v-html="str"></h1>
<body><divid="app"><h2v-html="str"></h2></div><scriptsrc="./js/vue.min.js"></script><script>var vm =newVue({el:'#app',data:{str:'<div>学习vue指令</div>',},methods:{}});</script>
3、v-text：会将元素当成纯文本输出（他不解析标签）
举例：
<h1 v-text="str"></h1>
<body><divid="app"><h2v-text="str"></h2></div><scriptsrc="./js/vue.min.js"></script><script>var vm =newVue({el:'#app',data:{str:'<div>学习vue指令</div>',},methods:{}});</script>
4、v-if : 根据条件判断标签是否加载
举例：
<h1 v-if="true">{{str}}</h1>
<body><divid="app"><h2v-if="bol"></h2></div><scriptsrc="./js/vue.min.js"></script><script>var vm =newVue({el:'#app',data:{bol:false},methods:{}});</script>
5、v-for：循环
举例：v-for 循环遍历 array —> value
<p v-for="value in arr">{{value}}</p>
v-for 循环遍历 array —> index ---- value
<p v-for="(value,index) in arr">{{index}}----->{{value}}</p>
<ul><liv-for="value in arr"><h3>id:{{value.id}}</h3><h3>name:{{value.name}}</h3></li><ul><scriptsrc="./js/vue.min.js"></script><script>var vm =newVue({el:'#app',data:{arr:[{id:1,name:'小明'},{id:2,name:'小红'},{id:3,name:'小绿'},]},methods:{}});</script>
6、v-on：给标签绑定函数
举例：
<h1 v-on:click="demo">{{str}}</h1>
简写方式：
<h1 @click="demo">{{str}}</h1>
将v-on换成@
<divid="app"><inputtype="button"value="v-on指令"v-on:click="one"><inputtype="button"value="v-on指令简写"@click="two"></div><scriptsrc="./js/vue.min.js"></script><script>var vm =newVue({el:'#app',data:{},methods:{one:function(){alert('我是Vue中v-on指令，我的作用是为元素绑定事件，v-on:click= ""');},two:function(){alert('我是Vue中v-on指令，我的作用是为元素绑定事件,简写方法 @click=""');}}});</script>
7、v-show：根据条件判断内容是否展示 v-show还可以写表达式哦
举例：
<h1 v-show="false">{{str}}</h1>
<body><divid="app"><h2v-show="show > 20"></h2></div><scriptsrc="./js/vue.min.js"></script><script>var vm =newVue({el:'#app',data:{show:60},methods:{}});</script>
8、 v-bind :动态数据引用
举例：
<a v-bind:href="url">{{str}}</a>
<divid="app"><!-- v-bind 是一个绑定指令，他可以绑定任何一个标签的任何属性 --><imgv-bind:src="src"></div><scriptsrc="./js/vue.min.js"></script><script>var vm =newVue({el:'#app',data:{src:'./img/1.jpg'},methods:{//是vue中存储函数和方法的地方}});</script>
9、v-model：双向数据绑定 一般用表单中
举例：
<input v-model="name" />
<divid="app"><!--作用体现在绑定的变量的值跟在浏览器上显示的内容保持一值 --><inputtype="text"v-model="message"><h1> {{message}} </h1></div><scriptsrc="./js/vue.min.js"></script><script>var vm =newVue({el:'#app',data:{message:"",}})</script>
10、v-once ：执行一次性地插值，当数据改变时，插值处的内容不会更新
举例：
<span v-once>这个将不会改变: {{ msg }}</span>
<divid="app"><inputtype="text"v-model="str"><h1v-once>初始化数据：{{str}}</h1><h1>新数据：{{str}}</h1></div><scriptsrc="./js/vue.min.js"></script><script>newVue({el:"#app",data:{str:"123456"}})</script>
本文转载自: https://blog.csdn.net/ORANGEFISHs/article/details/125284246
版权归原作者 Orangefishs_ 所有， 如有侵权，请联系我们删除。
版权归原作者 Orangefishs_ 所有， 如有侵权，请联系我们删除。