在Vue.js中，包含了很多的指令，有v-if、v-for、v-model、v-once、v-bind等。其中，v-once指令可以用来绑定数据，但是绑定之后数据是不会发生改变。下面利用一个实例说明v-once指令的用法，操作如下：
工具/原料
1
Vue.js
2
HTML5
3
CSS3
4
HBuilder
5
浏览器
6
截图工具
方法/步骤
1
第一步，双击打开HBuilder开发工具，新建静态页面vonce.html，修改title标签内的内容，如下图所示：
2
第二步，利用标签，插入Vue.js相关的JavaScript文件，如下图所示：
3
第三步，在
标签元素内插入一个div标签，设置ID属性值；并在这个div标签内插入一个span和input输入框，利用v-once和v-model指令绑定数据，如下图所示：4
第四步，在div标签元素下方，插入标签，并在这个标签内初始化vue.js，如下图所示：
5
第五步，保存代码并在浏览器中预览页面效果，并修改输入框中的值，如下图所示：
6
第六步，结果发现输入框中的值和外面的值不是一起发生改变，说明v-once指定绑定的数据是不变的，如下图所示：
注意事项
1
注意Vue.js中的v-once指令的用法
2
注意利用CSS3设置渐变样式属性
上一篇：怎样养好金边筒凤梨