第一步,创建静态页面vtext.html,修改title显示的内容并引入vue.js,如下图所示:
第二步,在body标签元素内插入两个span元素,在第一个span绑定v-text指令,第二个span中插入{{message}},如下图所示:
第三步,编写JS代码,绑定数据源message,如下图所示:
第四步,预览静态页面vtext.html,发现{{message}}还是一样,未变成赋的值,如下图所示:
第五步,在两个span外层添加一个div,并将第一个span的id赋给div,再在第一个span标签上绑定v-model,如下图所示:
第六步,再次预览发现页面中的{{message}}变为绑定的数据源,如下图所示:
data中创建一个属性i。 li注册一个click事件并把$index的值传进去,在这个事件中把i赋值为$index。 然后li的v-bind:class="{classname: i==$index}"