时间：2023-06-07 02:09:02 | 来源：网站运营
时间：2023-06-07 02:09:02 来源：网站运营
VUE-模板语法：
在线咨询
<div id="app"> <h2>{{message}}</h2> <h2>{{firstname + ' ' + lastname}}</h2> <h2>{{counter *2}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123', firstname: 'james', lastname: 'jack', counter: '100' } })</script><div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123' } })</script>2、v-html<div id="app"> <h2 v-html="url"></h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { url: '<a href="https://www.baidu.com">百度一下</a>' } })</script>3、v-text<div id="app"> <h2>{{message}}</h2> <h2 v-text="message"></h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123' } })</script>4、v-pre<div id="app"> <h2>{{message}}</h2> <h2 v-pre>{{message}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123' } })</script><div id="app"> <img v-bind:src="imgURL" > <a v-bind:href="aHref">vue官网</a></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { imgURL: 'https://cn.vuejs.org/images/logo.svg', aHref: 'https://cn.vuejs.org/' } })</script>v-bind语法糖（简写）：<div id="app"> <img :src="imgURL" > <a :href="aHref">vue官网</a></div>2、v-bind动态绑定class（对象语法）：后面跟的是一个对象<div id="app"> <h2 :class="{active:isActive,none:isnone}">{{message}}</h2> <button v-on:click="btnclick" type="button">按钮</button></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123', isActive: true, isnone: true }, methods:{ btnclick:function(){ this.isActive = !this.isActive } } })</script>单击按钮后：用法一:直接通过{}绑定一个类<h2 :class="{'active ' : isActive} ">Hello world</h2>用法二:也可以通过判断，传入多个值<h2 :class=" { 'active': isActive，'line': isLine} ">Hello world</h2>用法三:和普通的类同时存在，并不冲突注:如果isActive和isLine都为true，那么会有title/active/line三个类<h2 class="title" ;class="{ 'active': isActive，'line ': isLine}" >Hello world</h2>用法四:如果过于复杂，可以放在一个miethods或者computed中注: classes是一个计算属性<h2 class="title" :class="classes ">Hello world</h2>3、v-bind动态绑定class（数组语法）<div id="app"> <h2 class="title" :class="['active','none']">{{message}}</h2> <h2 class="title" :class="[active,none]">{{message}}</h2> <h2 class="title" :class="getClasses()">{{message}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123', active: 'aaaaa', none: 'bbbbb' }, methods: { getClasses:function() { return [this.active,this.none] } } })</script>4、v-bind动态绑定style(对象语法)<div id="app"> <h2 :style="{fontSize: finalSize + 'px',color: finalColor}">{{message}}</h2> <h2 :style="getStyle()">{{message}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123', finalSzie: 20, finalColor: 'red' }, methods:{ getStyle: function() { return {fontSize: this.finalSzie + 'px', color: this.finalColor} } } })</script>5、v-bind动态绑定style(对象语法)<div id="app"> <h2 :style="[Style,Style1]">{{message}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123', Style: {color: 'red'}, Style1: {fontSize: '50px'} } })</script>关键词：语法,模板
