uni-app数据绑定
<p>之前接触前端，数据绑定这块要么用组件，要么用jq去操作dom</p><p>uni-app数据绑定分两种情况</p>
<p>在标签内部绑定使用：{{参数}}</p>
<p>标签内部绑定使用： 例：:value='参数' 也就是标签内属性绑定参数要多加个：</p>
<p>当前绑定的前提基于该参数存在</p>
<p>在每个.vue的页面中都有配置数据的地方：</p>
<div class="cnblogs_code">
<pre><script><span style="color: rgba(0, 0, 0, 1)">
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
data() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
UserName: </span>'admin'<span style="color: rgba(0, 0, 0, 1)">
}
},
methods: {
}
}
</span></script></pre>
</div>
<p>data(){}就是放数据的地方</p>
<p>只要在data(){}中return了，都可以按照上面两种方法去绑定数据</p>
<p>部分情况也存在要绑定的数据是个数组，这个时候就需要循环绑定了</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">template</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="content"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">v-for</span><span style="color: rgba(0, 0, 255, 1)">="(stu,index) in student"</span><span style="color: rgba(255, 0, 0, 1)"> :key</span><span style="color: rgba(0, 0, 255, 1)">='index'</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
姓名:{{stu.name}},年龄{{stu.age}}
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">template</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<div class="cnblogs_code">
<pre><script><span style="color: rgba(0, 0, 0, 1)">
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
data() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
student: [
{
name:</span>'张三'<span style="color: rgba(0, 0, 0, 1)">,
age:</span>10<span style="color: rgba(0, 0, 0, 1)">
},
{
name:</span>'李四'<span style="color: rgba(0, 0, 0, 1)">,
age:</span>10<span style="color: rgba(0, 0, 0, 1)">
},
{
name:</span>'王五'<span style="color: rgba(0, 0, 0, 1)">,
age:</span>10<span style="color: rgba(0, 0, 0, 1)">
},
]
}
},
methods: {
}
}
</span></script></pre>
</div>
<p>可以看到循环用 v-for，后面有用到一个 :key,是为了保证循环的每项的唯一性</p><br><br>
来源：https://www.cnblogs.com/getmn/p/11030204.html
頁:
[1]