分析：要让文字达到滚动效果，就是随时间变化将字符串的末尾字符移动到头部，或是反过来。总结起来就是每隔一段时间操作一次字符串。另外需要一个按钮来控制文字的滚动效果。
实现：
<div> <p>{{ message }} </p> <button @click="changeMessage"> {{ btn }} </button> </div> var app = new Vue({ el: '#app', data: { message: '0123456789', btn: '开始', status: true, intervalId: undefined }, methods: { changeMessage: function(){ var THIS = this; THIS.status = !THIS.status; if(!THIS.intervalId){ THIS.intervalId = window.setInterval(function(){ THIS.message = THIS.message.toString();//防止纯数字报错 var len = THIS.message.length; THIS.message = THIS.message.charAt(len-1) + THIS.message.slice(0, len - 1); }, 1000); } if(THIS.status){ THIS.intervalId = clearInterval(THIS.intervalId); THIS.btn = '开始'; }else{ THIS.btn = '暂停'; } } } })
利用表单双向绑定实现简单的计算器
<div> <input type="text" v-model="x" @input="calculate"> <select v-model="smybol" @change="calculate"> <option value="+" selected="true">+</option> <option value="-">-</option> <option value="*">*</option> <option value="http://www.likecs.com/">/</option> </select> <input type="text" v-model="y" @input="calculate"> <input type="button" value="=" @click="calculate"> <input type="text" v-model="value"> </div> var app = new Vue({ el: '#app', data: { x: 0, y: 0, value: 0, smybol: "+" }, methods: { calculate: function(){ var THIS = this; var x = window.parseFloat(THIS.x); var y = window.parseFloat(THIS.y); var S = x + THIS.smybol + y; THIS.value = window.parseFloat(eval(S)); } } })使用v-bind动态修改元素class或style
class
<!DOCTYPE html> <html> <head> <title>Vue1</title> <script src="http://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style type="text/css"> .red{ color: #abc; } .italic{ font-style: italic; } .larg{ font-size: 30px; } </style> </head> <body> <div> <p>规则，就是用来打破的</p> <!--原生class写法--> <p>规则，就是用来打破的</p> <!--v-bind场景一:使用数组--> <p :class="['red','italic','larg']">规则，就是用来打破的</p> <!--场景二：使用三元表达式--> <p :class="['red','italic',flag?'larg':'']">规则，就是用来打破的</p> <!--场景三：使用数组对象--> <p :class="['red','italic',{larg:flag}]">规则，就是用来打破的</p> <!--场景四：直接使用对象--> <p :class="{red:false, italic:true, larg:true}">规则，就是用来打破的</p> <!--动态绑定--> <p :class="app_class">规则，就是用来打破的</p> </div> </body> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { flag: false, app_class: {red:true, italic:true, larg:true} } }); </script> </html>
style
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <script src="http://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div> <!--原生写法--> <h1>Jinx的含义就是Jinx.</h1> <!--使用对象--> <h1 :style="{color:'#217352','font-style':'30px','font-style':'italic'}">Jinx的含义就是Jinx.</h1> <!--使用数组--> <h1 :style="[{color:'#FF9800','font-style':'30px'},{'font-style':'italic'}]">Jinx的含义就是Jinx.</h1> <!--动态绑定--> <h1 :style="[sty1, sty2]">Jinx的含义就是Jinx.</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { flag: false, sty1: {color:'#aa9800','font-style':'30px'}, sty2: {'font-style':'italic'} } }); </script> </body> </html>